Tooltip on disabled button with wrapper

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
</script>

<template>
  <div class="flex items-center justify-center">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger as-child>
          <span class="cursor-not-allowed">
            <Button variant="outline" disabled>Delete Project</Button>
          </span>
        </TooltipTrigger>
        <TooltipContent>
          <p class="text-sm">You need admin access to delete projects</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</template>