Tooltip

Tooltips display additional text information when hovering over or focusing on an element.
Automatically fits the popover into the viewport or locks it to the position value you provide
Full keyboard navigation
Supports custom trigger element rendering
Similar components:
Popover


Usage

Tooltips can be added to any interactive element on the page by passing attributes to it and adding the content you want to render.

You can define the position you want Tooltip to be displayed at. However, if it doesn't fit into the screen, it will automatically pick a better position that stays within the viewport.

Disabled elements

When rendering disabled elements on the page, they will ignore all events, which will prevent Tooltip from appearing if you use it directly for that element. A good approach to use instead is to wrap your disabled element with Actionable utility rendering it as div. This will help you avoid rendering 2 nested buttons and automatically apply all accessibility related attributes.

Accessibility

It's important to pass the attributes provided by the Tooltip component to your interactive trigger component. That way you will ensure that all the user events and aria attributes are assigned correctly.

Properties

NameTypeDefaultRequiredComment
idstring-falseCustom id override
positiontop, top-start, top-end, bottom, bottom-start, bottom-end, start, end-false
onOpen() => {}-false
onClose() => {}-false
childrenReactNode-false
textReactNode-false