Tooltip

Floating labels providing context

Basic tooltips on icons

Hover, click, or focus on the tooltip to open it.

Screen readers will announce the Tooltip component text when the button receives focus.

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }}
>
    <Tooltip text="This is a default tooltip.">
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <TextButton
                iconLeft={<NotificationAlertsHelpSmall />}
                theme="inherit"
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
            />
        )}
    </Tooltip>
</div>

Rich tooltips on icons

Hover, click, or focus on the tooltip to open rich tooltip with link inside tooltip content.

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }}
>
    <Tooltip
        text="This is a rich tooltip. For more details visit "
        container="inline"
        zIndex={500}
        cta={{
            type: 'link',
            href: 'https://thumbprint.design/',
            text: 'Thumbprint.design',
        }}
        persistTooltipOnClick
    >
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <TextButton
                iconLeft={<NotificationAlertsHelpSmall />}
                theme="inherit"
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
            />
        )}
    </Tooltip>
</div>

The theme prop makes it possible to use tooltips on dark backgrounds.

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff',
    }}
>
    <Tooltip text="This is a default tooltip." theme="light">
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <TextButton
                iconLeft={<NotificationAlertsHelpSmall />}
                theme="inherit"
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
            />
        )}
    </Tooltip>
</div>

Tooltips can also be used with the Link and ThemedLink components.

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }}
>
    <Tooltip text="This is a tooltip for a link">
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <Link
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
                to="#"
            >
                Next
            </Link>
        )}
    </Tooltip>
</div>

Props

children
required
A function that renders JSX and receives an object with ref, onMouseEnter, onFocus, onMouseLeave, onBlur, onClick, and ariaLabel. All of these props must be added to the component within the render prop.

Type
(args: ChildrenPropTypes) => JSX.Element
text
required
Plain text that will appear within the tooltip. Links and formatted content are not allowed.

Type
string
cta
Tooltip cta in form of text button/link for rich tooltip

Type
| { type: 'link'; href: string; text: string; onClick?: () => void; } | { type: 'button'; onClick: () => void; text: string; }
theme
Controls the look of the tooltip.

Type
'light' | 'dark'
Default
'dark'
position
Determines where the tooltip will attempt to position itself relative to the children. The tooltip will reposition itself to fit within the contianer.

Type
'top' | 'bottom'
Default
'top'
closeDelayLength
Number in milliseconds that determines how long to wait before closing the tooltip when the onMouseLeave event fires. A small delay prevents the tooltip from closing if the user moves their cursor from the button to the tooltip. This value should only be set to 0 when two or more tooltip components are used near each other.

Type
0 | 200
Default
200
container
By default tooltips will render right before the </body> tag.

Setting the container to inline causes the tooltip to remain where it was added to the DOM.

This option is helpful to work around z-index and positioning issues.

Type
'inline' | 'body'
Default
'body'
zIndex
Adds a z-index to the tooltip. Before using this prop, try to use container="inline".

Type
number
persistTooltipOnClick
Persist tooltip and not hide on click

Type
boolean
onOpened
Callback that is invoked after the tooltip is opened. type denotes whether it was triggered via hover or click.

Type
(type: 'click' | 'hover') => void

Tooltip

Basic tooltips on icons

Rich tooltips on icons

Light tooltip on a dark background

Tooltip on a Link

Props

Tooltip