Tooltip

Floating tooltips for displaying additional information.

Tooltip is built on top RadixUI Tooltip component. All RadixUI props are passed, and can be used in the same way.

children

ReactNode

The content the tooltip wraps

*Can't edit react node values here

Anatomy

<Tooltip>
  <Tooltip.Trigger> 
    {/* ... */}
  </Tooltip.Trigger>
  <Tooltip.Content>
    {/* ... */}
  <Tooltip.Content>
</Tooltip>

To add an arrow indicator to the tooltip, add arrowClassName='fill-theme-muted' prop to Tooltip.Content.

You can also enable this globally by setting tooltip.content_arrow: 'fill-theme-muted' in your UniversalUIConfigProvider.