TooltipSides() — ui Function Reference

Architecture documentation for the TooltipSides() function in tooltip-sides.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ TooltipSides() — ui Function Reference

Dependency Diagram

graph TD
  f000c51b_b0f3_301b_0f2e_8f066464e4b6["TooltipSides()"]
  ae12d28c_d539_db04_3c1d_fb0d74d78a3b["tooltip-sides.tsx"]
  f000c51b_b0f3_301b_0f2e_8f066464e4b6 -->|defined in| ae12d28c_d539_db04_3c1d_fb0d74d78a3b
  style f000c51b_b0f3_301b_0f2e_8f066464e4b6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/tooltip-sides.tsx lines 8–25

export function TooltipSides() {
  return (
    <div className="flex flex-wrap gap-2">
      {(["left", "top", "bottom", "right"] as const).map((side) => (
        <Tooltip key={side}>
          <TooltipTrigger asChild>
            <Button variant="outline" className="w-fit capitalize">
              {side}
            </Button>
          </TooltipTrigger>
          <TooltipContent side={side}>
            <p>Add to library</p>
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}