Tooltip

import { PlusIcon } from "lucide-react"

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

export default function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="outline" size="icon" aria-label="Dodaj do biblioteki" />
        }
      >
        <PlusIcon />
      </TooltipTrigger>
      <TooltipContent>Dodaj do biblioteki</TooltipContent>
    </Tooltip>
  )
}

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

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

const actions = [
  { label: "Pogrubienie", icon: BoldIcon, keys: ["⌘", "B"] },
  { label: "Kursywa", icon: ItalicIcon, keys: ["⌘", "I"] },
  { label: "Przekreślenie", icon: StrikethroughIcon, keys: ["⌘", "⇧", "X"] },
  { label: "Kod w tekście", icon: CodeIcon, keys: ["⌘", "E"] },
  { label: "Link", icon: LinkIcon, keys: ["⌘", "K"] },
]

export default function TooltipShortcuts() {
  return (
    <div
      role="toolbar"
      aria-label="Formatowanie"
      className="flex items-center gap-0.5 rounded-xl border bg-card p-1 shadow-raised"
    >
      {actions.map(({ label, icon: Icon, keys }, index) => (
        <div key={label} className="contents">
          {index === 3 && (
            <Separator
              orientation="vertical"
              className="mx-1 h-5! self-center!"
            />
          )}
          <Tooltip>
            <TooltipTrigger
              render={
                <Button variant="ghost" size="icon-sm" aria-label={label} />
              }
            >
              <Icon />
            </TooltipTrigger>
            <TooltipContent>
              {label}
              <KbdGroup>
                {keys.map((key) => (
                  <Kbd key={key}>{key}</Kbd>
                ))}
              </KbdGroup>
            </TooltipContent>
          </Tooltip>
        </div>
      ))}
    </div>
  )
}

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

const sides = ["top", "right", "bottom", "left"] as const

export default function TooltipSides() {
  return (
    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
      {sides.map((side) => (
        <Tooltip key={side}>
          <TooltipTrigger
            render={<Button variant="outline" className="capitalize" />}
          >
            {side}
          </TooltipTrigger>
          <TooltipContent side={side}>Wyświetlana po stronie {side}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}

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

export default function TooltipDisabled() {
  return (
    <Tooltip>
      {/*
        A disabled <button> receives no pointer or focus events, so its tooltip
        could never open. `focusableWhenDisabled` keeps it reachable while
        still blocking activation.
      */}
      <TooltipTrigger render={<Button disabled focusableWhenDisabled />}>
        Opublikuj
      </TooltipTrigger>
      <TooltipContent>Przed publikacją dodaj tytuł</TooltipContent>
    </Tooltip>
  )
}

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

const delays = [
  { label: "Natychmiast", delay: 0 },
  { label: "Domyślnie", delay: undefined },
  { label: "Z opóźnieniem", delay: 1000 },
]

export default function TooltipDelay() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      {delays.map(({ label, delay }) => (
        <Tooltip key={label}>
          <TooltipTrigger delay={delay} render={<Button variant="outline" />}>
            {label}
          </TooltipTrigger>
          <TooltipContent>
            {delay === undefined
              ? "Dziedziczy 400 ms z providera"
              : `Otwiera się po ${delay} ms`}
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}