0% Complete


Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.


Basic usage

Default slot is used to display the text label. The text label is displayed when the user hovers over the element with the mouse cursor.

Tooltip on top


You can decide where the text label is to be displayed - at the top, bottom or on either side of the element. To change the placement of the tooltip, use the placement prop.

Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left


You can insert HTML to other components code inside Tooltip's default slot to highlight particular bits of information and make the content more attractive.

Tooltip with HTML