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
  1e9b5ba9_2a66_f752_0e21_32243ce210f6["TooltipSides()"]
  0aa0c0e9_4363_0b74_b568_9ed8017f126a["tooltip-sides.tsx"]
  1e9b5ba9_2a66_f752_0e21_32243ce210f6 -->|defined in| 0aa0c0e9_4363_0b74_b568_9ed8017f126a
  style 1e9b5ba9_2a66_f752_0e21_32243ce210f6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/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
            render={<Button variant="outline" className="w-fit capitalize" />}
          >
            {side}
          </TooltipTrigger>
          <TooltipContent side={side}>
            <p>Add to library</p>
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}