Tooltip is a small, floating content block triggered via hovering over or focusing on an element.

Tooltips are meant to be used primarily for supplemental content and should never get in the way of critical tasks. In most cases, Tooltips should not contain interactive content (such as buttons or links). In those cases, it may be better to use the Popout component, which is displayed to the user on click rather than via hover or focus.

import { Tooltip } from '@sproutsocial/racine'

Tooltips can have two different appearances:

  • pill - a small, rounded shape used for short, single lines of text
  • box - a rectangular shape used for multi-line text and/or more complex content like images and lists
For more information and examples of how to use Tooltip in practice, check out the overlays section of our contextual messaging pattern.


System props passed to the Tooltip component will be spread down onto the tooltip content, and can be used to adjust the styles of the floating toolip container.

The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear
The content to be displayed within the tooltip. If there is no content, just the children are rendered
The placement of the tooltip in relation to the children
enterDelaynumberMOTION.MOTION_DURATION_FAST * 1000
The time (in ms) that a user has to be hovered/focused before the tooltip will appear
Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop.
Props to be spread onto the underlying Popout component
Truncates text into a single line with ellipsis


Tooltip with image

Tooltip with focusable content

It is recommended that you do not include interactive elements within tooltips. Popouts are much better suited because they are triggered via click instead of via hover.

If you do need to support focusing on elements within a tooltip, you can set the focusOnContent prop to true on the underlying Popout component by passing it through popoutProps:

Tooltip with truncated text