Tooltip

A tooltip is used to show contextual information when triggered by clicking, focusing, or hovering an element.

Demo

Usage

When to use

• Offer more information. Use tooltips to offer more information about an element. This can help users who are unsure about something.
• Preview contents. Use tooltips to show a preview of something inside an element. For example, a tooltip when hovering over a folder that has several items could show the item names.

When not to use

• Essential information. Don't use tooltips for essential information, because a user might not know they're there.
• Actions. Don't put actions inside tooltips.
• Repeated information. Don't repeat information that's already on the screen. Only use tooltips to offer more context or useful information about something.

Format

Content

• Use easy to understand content, no longer than a short sentence.

Options

Position

Default

Demo

Left

Demo

Right

Demo

Bottom

Demo

<Tooltip content="Tooltip content">Hover to trigger top tooltip.</Tooltip>
<Tooltip placement="left" content="Tooltip content">Hover to trigger left tooltip.</Tooltip>
<Tooltip placement="right" content="Tooltip content">Hover to trigger right tooltip.</Tooltip>
<Tooltip placement="bottom" content="Tooltip content">Hover to trigger bottom tooltip.</Tooltip>

• By default, tooltips are shown above the triggering element.
• Other positions, left, right, and bottom, are available. Only use these positions if there's a reason top doesn't work, like in an information dense layout.

Delay

Demo

<Tooltip openDelay={500} closeDelay={50} content="Tooltip content">
    Hover to trigger a tooltip with a longer open delay and shorter close delay.
</Tooltip>

• Tooltips have two delay durations: open and close.
• Use the default delay durations unless there's a specific use case to change them.
• Longer open delays and shorter close delays can help prevent too many tooltips showing in a complex layout.

API Reference

Tooltip

Usage

To use Tooltip, you can import the component from the @dhis2/ui library

import { Tooltip } from '@dhis2/ui'

Props

Name	Type	Default	Required	Description
children	node │ function			If child is a function, it's called with { onMouseOver, onMouseOut, ref } args to apply to a reference element. If child is a node, it is wrapped in a span with the appropriate attributes and handlers.
className	string
closeDelay	number	200		Time (in ms) until tooltip closes after mouse out
content	node			Content to display when the tooltip is open
dataTest	string	'dhis2-uicore-tooltip'
maxWidth	number	300		Max width of the tooltip in px
openDelay	number	200		Time (in ms) until tooltip open after mouse over
placement	'top' │ 'right' │ 'bottom' │ 'left'	'top'		Where to place the tooltip relative to its reference