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>
Light tooltip on a dark background
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>
Tooltip on a Link
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
Tooltip
children
requiredA function that renders JSX and receives an object with
ref
,onMouseEnter
,onFocus
,onMouseLeave
,onBlur
,onClick
, andariaLabel
. All of these props must be added to the component within the render prop.Type(args: ChildrenPropTypes) => JSX.Element
text
requiredPlain text that will appear within the tooltip. Links and formatted content are not allowed.
Typestring
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 to0
when two or more tooltip components are used near each other.Type0 | 200
Default200
container
By default tooltips will render right before the
</body>
tag.Setting the
container
toinline
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 usecontainer="inline"
.Typenumber
persistTooltipOnClick
Persist tooltip and not hide on click
Typeboolean