Tooltip

Default

Hello there!

Dismissible Tooltip

Close me

Dismissible Tooltip via JS API

Saves data to local storage.

Tooltip with Link Component

Tooltip Triggers

This tooltip will show on hover, click, and focus.


This tooltip will show only on hover.


This tooltip will show only on click.


This tooltip will show only on focus (use Tab key to focus).

Tooltip Trigger Inside a Form

Clicking the tooltip trigger does not submit the form.

Tooltip trigger clicks: 0, form submits: 0

Tooltip on Icon Component

Hover or click on the icon to view the tooltip

Placements

Click
the dots!
bottom

Advanced Floating Functionality

Try scrolling the frame or resizing the window to see how the Tooltip behaves. The Floating UI library is trying to keep the Tooltip in the viewport and it is also flipping, shifting and resizing the Tooltip when it is not possible to keep it in the viewport.

This long tooltip is flipping, resizing and shifting to stay in the viewport. Also its arrow is always trying to point to the center of the trigger.