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.

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
LAYOUT
Learn more
NameTypeDefaultDescriptionRequired?
childrenstringReactElement
The content that's the tooltip should be attached to
contentstringReactElement
The content to be displayed within the tooltip
placementEnumPlacements"auto"
The placement of the tooltip in relation to the content
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 contents will have the 'box' appearance. You can change those defaults by setting this prop.
qaObject
zIndexnumber
The z-index of the tooltip
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