Tooltips opening from different sides.

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

const sides = ["top", "right", "bottom", "left"] as const
</script>

<template>
  <TooltipProvider>
    <div class="grid max-w-xs grid-cols-2 gap-2">
      <Tooltip v-for="side in sides" :key="side">
        <TooltipTrigger as-child>
          <Button variant="outline" class="w-full">{{
            side.replace("-", " ").charAt(0).toUpperCase() + side.replace("-", " ").slice(1)
          }}</Button>
        </TooltipTrigger>
        <TooltipContent :side="side">
          <p class="text-sm">Add to library</p>
        </TooltipContent>
      </Tooltip>
    </div>
  </TooltipProvider>
</template>