Components

Tooltip

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 messages and text-based tooltips
  • box - a rectangle shape used for tooltips that contain more complex content

Properties

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.

NameTypeDefaultDescriptionRequired?
childrenReact.Node
The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear
contentReact.Node
The content to be displayed within the tooltip. If there is no content, just the children are rendered
placementEnumPlacements"auto"
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
appearance
"pill"
"box"
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.
qaObject
zIndexnumber7
popoutPropsObject
Props to be spread onto the underlying Popout component

Recipes

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:

Resources