TooltipDemo() — ui Function Reference

Architecture documentation for the TooltipDemo() function in tooltip-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ TooltipDemo() — ui Function Reference

Dependency Diagram

graph TD
  1454f664_031f_3412_138b_46a29e07782f["TooltipDemo()"]
  4cb12531_ce80_1bba_5f8c_cf737991c809["tooltip-demo.tsx"]
  1454f664_031f_3412_138b_46a29e07782f -->|defined in| 4cb12531_ce80_1bba_5f8c_cf737991c809
  style 1454f664_031f_3412_138b_46a29e07782f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/tooltip-demo.tsx lines 10–49

export function TooltipDemo() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
      <div className="flex gap-2">
        {["top", "right", "bottom", "left"].map((side) => (
          <Tooltip key={side}>
            <TooltipTrigger asChild>
              <Button variant="outline" className="capitalize">
                {side}
              </Button>
            </TooltipTrigger>
            <TooltipContent side={side as "top" | "right" | "bottom" | "left"}>
              <p>Add to library</p>
            </TooltipContent>
          </Tooltip>
        ))}
      </div>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="ghost" size="icon">
            <InfoIcon />
            <span className="sr-only">Info</span>
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          To learn more about how this works, check out the docs. If you have
          any questions, please reach out to us.
        </TooltipContent>
      </Tooltip>
    </div>
  )
}