Tooltip

The Tooltip component shows additional information, tips, or hints related to a specific element. Tooltips are activated when the user hovers over or focuses on the target element. They are often used in conjunction with Buttons or Links that do not contain Text. Use Tooltips for items with no visible label, or when a label is too long.

For more information on how to use the features and props for this component, check out the developer documentation.

Tooltips only accept Text as children, and they require a target element similar to Popovers. You can modify the speed at which Tooltips animate in and out via the showDelay and hideDelay props. If you pass the describeTarget prop, the Tooltip will automatically add an aria-describedby attribute to the target element.

Tooltips will render adjacent to its target in the DOM by deault. To change this behavior, pass the portal prop. This will render the Tooltip adjacent to another DOM element defined by the portalTarget on the Configuration component. By default, this is set to <body/>.

NameTypeDefaultDescription
children*
string |string[] 
Text content for the tooltip.
target*
Element |null 
Element to serve as the tooltip's target.
classNamestringAdditional CSS classes.
describeTargetbooleantrue If true, the Tooltip will automatically apply an aria-describedby attribute to its target.
hideDelayDelay"long" Delay hiding the tooltip on mouseleave.
portalbooleanfalse If true, the Tooltip will render outside of the current DOM hierarchy in a portal.
refRef<HTMLDivElement>
showDelayDelay"short" Delay showing the tooltip on mouseenter.

You can override the styles of the Tooltip component by setting a custom theme on the Configuration component.

{
      •       'foreground-color': 'base.colors.gray.extra-light', // → base.colors.gray.extra-light
      •       'background-color': 'base.colors.gray.extra-dark' // → base.colors.gray.extra-dark
      •     }
    •   }
}