A tooltip gives additional information about an interactive element - typically a button. The tooltip activates on mouse hover or keyboard focus of the button.

The tooltip must be programmatically associated with the button by using the aria-describedby property and tooltip role.

Toggle the aria-expanded state of the button to expand or collapse its associated tooltip.

By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

In order to get this to work with floating-ui, you need to remove pointer position tooltip__pointer--top-left and remove any style positioning