The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Tooltip

Source

A floating element that displays additional information when hovering over or focusing on an element.

Usage

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>

Examples

Placement

The tooltip can be positioned in different places relative to the trigger element.

Delay

Control the timing of when the tooltip appears and disappears.

Click Only

Show the tooltip only when clicking the trigger element instead of hovering.

Offset

Adjust the distance between the tooltip and the trigger element.

Custom Content

The tooltip content can be customized with any React component.

Props

Tooltip

PropTypeDefaultDescription
children

*

ReactNode-

Tooltip reference element.

content

*

ReactNode-

The content of the tooltip.

className
string-

Classname applied to the tooltip element.

clickOnly
booleanfalse

Whether to show the tooltip on click instead of hover.

closeDelay
number0

The delay before the tooltip disappears, in milliseconds.

flip
object-

Flip options for the tooltip to keep it within the viewport.

Flip API

focusable
booleantrue

Whether to show the tooltip on focus.

offset
OffsetOptions5

The offset of the tooltip from the reference element.

Flip API

openDelay
number500

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.

Shift API