Sprout Social

Components

Tooltip

View on GitHub

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'
<Box display='flex' alignItems='center' justifyContent='center'>

  <Tooltip content='Hello there!'>

    Hover over me

  </Tooltip>

</Box>

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
<Box display='flex' alignItems='center' justifyContent='center'>

  <Tooltip content='Pill appearance' placement='top'>

    <Text as='div' textAlign='center' fontSize={400}>Hover over me to see the pill appearance.</Text>

  </Tooltip>



  <Tooltip content='Box appearance' appearance='box' placement='top'>

    <Text as='div' textAlign='center' fontSize={400}>Hover over me to see the box appearance.</Text>

  </Tooltip>

</Box>
For more information and examples of how to use Tooltip in practice, check out the overlays section of our contextual messaging pattern.

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
truncatedbooleanfalse
Truncates text into a single line with ellipsis

Recipes

Tooltip with image

<Box display='flex' alignItems='center' justifyContent='center'>

  <Tooltip

    maxWidth='500px'

    content={

      <Image

        alt='The reception area of the Sprout Social office.'

        src='https://sproutsocial.com/seeds/example-photo.jpg'

        m={0}

      />

    }

  >

    Hover over me to see an image.

  </Tooltip>

</Box>

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:

<Box display='flex' alignItems='center' justifyContent='center'>

  <Tooltip

    content={

      <Box>

        <Text as='div' mb={350}>The button should be focused.</Text>



        <Button appearance="secondary" onClick={() => alert('Clicked!')} width={1}>

          Click me

        </Button>

      </Box>

    }

    popoutProps={{focusOnContent: true}}

  >

    <Button appearance="secondary">Hover over me</Button>

  </Tooltip>

</Box>

Tooltip with truncated text

<Box display='flex' alignItems='center' justifyContent='center'>

  <Box width={200}>

    <Tooltip content='Well howdy there partner' truncated>

      <Text>Show me something good</Text>

    </Tooltip>

  </Box>

</Box>

Resources