Tooltip

A popup that displays additional information when a user hovers over or focuses an element.

Usage


import { Tooltip } from "@rhinolabs/ui"
 
export default function TooltipDemo() {
  return (
    <Tooltip.Provider>
      <Tooltip>
        <Tooltip.Trigger>Hover</Tooltip.Trigger>
        <Tooltip.Content>
          <p>Add to library</p>
        </Tooltip.Content>
      </Tooltip>
    </Tooltip.Provider>
  )
}

Examples

A simple tooltip with text content.


<Tooltip.Provider>
  <Tooltip>
    <Tooltip.Trigger asChild>
      <Button variant="outline">Hover me</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>Add to library</p>
    </Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

With Custom Positioning

Tooltip with custom side and alignment.


<Tooltip.Provider>
  <div className="flex space-x-4">
    <Tooltip>
      <Tooltip.Trigger asChild>
        <Button variant="outline">Top</Button>
      </Tooltip.Trigger>
      <Tooltip.Content side="top">
        <p>This tooltip appears on top</p>
      </Tooltip.Content>
    </Tooltip>
    <Tooltip>
      <Tooltip.Trigger asChild>
        <Button variant="outline">Right</Button>
      </Tooltip.Trigger>
      <Tooltip.Content side="right">
        <p>This tooltip appears on the right</p>
      </Tooltip.Content>
    </Tooltip>
  </div>
</Tooltip.Provider>

With Icons

Tooltip with icon and text.


<Tooltip.Provider>
  <Tooltip>
    <Tooltip.Trigger asChild>
      <Button size="icon" variant="ghost">
        <InfoIcon className="h-4 w-4" />
      </Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>View more information</p>
    </Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

Props

TooltipContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Preferred side
`sideOffset`	`number`	`4`	Distance from trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Preferred alignment
`alignOffset`	`number`	-	Alignment offset

All components accept their respective Radix UI Tooltip primitive props.

Design Considerations

Keep content concise
Position logically
Use appropriate delays
Consider mobile usage
Maintain readability

Accessibility

Supports keyboard focus
Manages hover states
Provides ARIA labels
Handles screen readers
Times out appropriately