The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A floating element that displays additional information when hovering over or focusing on an element.
Import the Tooltip component from @bun-ui/react and use it in your project:
import { Tooltip } from "@bun-ui/react"<Tooltip content="This is a tooltip">
<button>Hover me</button>
</Tooltip>The tooltip can be positioned in different places relative to the trigger element.
Control the timing of when the tooltip appears and disappears.
Show the tooltip only when clicking the trigger element instead of hovering.
Adjust the distance between the tooltip and the trigger element.
The tooltip content can be customized with any React component.
| Prop | Type | Default | Description |
|---|---|---|---|
children * | ReactNode | - | Tooltip reference element. |
content * | ReactNode | - | The content of the tooltip. |
className | string | - | Classname applied to the tooltip element. |
clickOnly | boolean | false | Whether to show the tooltip on click instead of hover. |
closeDelay | number | 0 | The delay before the tooltip disappears, in milliseconds. |
flip | object | - | Flip options for the tooltip to keep it within the viewport. |
focusable | boolean | true | Whether to show the tooltip on focus. |
offset | OffsetOptions | 5 | The offset of the tooltip from the reference element. |
openDelay | number | 500 | The delay before the tooltip appears, in milliseconds. |
placement | Placement | "top" | The placement of the tooltip. |
shift | object | - | The shift options for the tooltip to keep it within the viewport. |