TooltipSides() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ TooltipSides() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/tooltip-example.tsx lines 46–74

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