Tooltips provide additional information upon hover or click. They often include contextual helper text to guide the user through the experience or provide more detail. Tooltips in Base have no arrow indicator and can be placed around any point of an object. Motion helps to reinforce its origin position.

Examples

Tooltip stateful example

You can use tooltips in many places, including inline text such as this. Tooltips are essentially just a Popover with a few style tweaks, so you can use all the features that Popover supports.

Tooltip stateful example with complex content

You can use tooltips in many places, including inline text such as this. Tooltips are essentially just a Popover with a few style tweaks, so you can use all the features that Popover supports.

Overrides

Additionally, you can fully customize any part of the Tooltip through the overrides prop. The Tooltip consists of multiple sub-components that are listed bellow and you can override each one of them. To help you identify the names of these sub-components, you can highlight them through this selector:

Arrow

Body

Inner

hover over me