Skip to main content
/
/
/
Tooltip

Tooltip

Display a positioned pop-up on hover

import Tooltip from "@intility/bifrost-react/Tooltip";
Props
Rewritten in 5.0
Single child element

The nested content of <Tooltip> needs to be a single element able to hold a ref, unless an element reference is passed to the reference prop. It should work with most Bifrost components and default html elements.

Basic Tooltip

Also see <Dropdown>

Default behaviour is to automatically only display the tooltip on hover.

Hover me

To make it accessible for keyboard users, make sure to use a focusable element like <Button>.

Compact Tooltip

Use variant='compact' for smaller tooltip

Hover me

Visible state

Show/hide the tooltip with visible boolean prop.

Click the button to toggle me!

Placement

The placement prop allows you to set a preferred placement ("top" is default, see Floating UI docs for all options).

States

Other than the default state, there is also a more subtle 'neutral'.

Hover me