Tooltip

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="secondary" />}>
        Hover
      </TooltipTrigger>
      <TooltipContent>Add to library</TooltipContent>
    </Tooltip>
  )
}

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

export function TooltipSides() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {(["top", "right", "bottom", "left"] as const).map((side) => (
        <Tooltip key={side}>
          <TooltipTrigger
            render={<Button variant="outline" className="capitalize" />}
          >
            {side}
          </TooltipTrigger>
          <TooltipContent side={side}>Opens on the {side}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}

import {
  BoldIcon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

export function TooltipWithShortcut() {
  return (
    <div className="flex items-center gap-0.5">
      {formats.map(({ label, icon: Icon, key }) => (
        <Tooltip key={label}>
          <TooltipTrigger
            render={
              <Button variant="ghost" size="icon-sm" aria-label={label} />
            }
          >
            <Icon />
          </TooltipTrigger>
          <TooltipContent>
            {label}
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>{key}</Kbd>
            </KbdGroup>
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}

const formats = [
  { label: "Bold", icon: BoldIcon, key: "B" },
  { label: "Italic", icon: ItalicIcon, key: "I" },
  { label: "Underline", icon: UnderlineIcon, key: "U" },
  { label: "Strikethrough", icon: StrikethroughIcon, key: "X" },
]

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

export function TooltipLongContent() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline" />}>
        Sync status
      </TooltipTrigger>
      <TooltipContent>
        Last synced 2 minutes ago. Changes made offline upload as soon as you
        reconnect.
      </TooltipContent>
    </Tooltip>
  )
}

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

export function TooltipDisabled() {
  return (
    <Tooltip disabled>
      <TooltipTrigger render={<Button variant="secondary" />}>
        Hover
      </TooltipTrigger>
      <TooltipContent>Never shows</TooltipContent>
    </Tooltip>
  )
}