@usevyre/react @usevyre/vue

Tooltip

A floating label that appears on hover or focus. Wraps any single focusable element as the trigger. Accessible via aria-describedby.

Placement

Hover each button to see the tooltip. Tooltip will flip automatically if there isn't enough space in the preferred direction. 

<Tooltip content="Appears above" placement="top">
  <Button variant="secondary">Top</Button>
</Tooltip>

<Tooltip content="Appears below" placement="bottom">
  <Button variant="secondary">Bottom</Button>
</Tooltip>

<Tooltip content="Appears left" placement="left">
  <Button variant="secondary">Left</Button>
</Tooltip>

<Tooltip content="Appears right" placement="right">
  <Button variant="secondary">Right</Button>
</Tooltip>

Delay

 
{/* Custom delay */}
<Tooltip content="Fast" delay={0}>
  <Button variant="secondary">No delay</Button>
</Tooltip>

<Tooltip content="Slow" delay={800}>
  <Button variant="secondary">800ms delay</Button>
</Tooltip>

Props

Props

Prop Type Default Description
content string | ReactNode — Tooltip text or content.
placement "top" | "bottom" | "left" | "right" "top" Preferred position relative to the trigger.
delay number 300 Delay in ms before showing on hover.
class / className string — Additional CSS class on the tooltip bubble.
← Toast Typography →