GitHub icon

<div>
	<br />
	<Stack alignItems='center' justifyContent='center'>
		<Stack.Item className='p-r-5'>
			<Tooltip open text="This is a really long tooltip that stretches over many lines">
				<Link href="https://dribbble.com/servicetitan" primary>
					A Link
				</Link>
			</Tooltip>
		</Stack.Item>
		<Stack.Item>
			<Tooltip open text="This is a tooltip" direction="r">
				<Button iconName='help' />
			</Tooltip>
		</Stack.Item>
	</Stack>
</div>

Content

Tooltip content is designed to be concise. Tooltips only support basic text and cannot support features like bold, italics, links, paragraphs, or images. Basic symbols and emojis (e.g. ⌘, ©, 👋) are allowed.

A tooltip's max width is 268px (252px/18em for text, with 8px of padding on both sides).

Directions

Tooltips can appear in many directions relative to an element. Direction is manually controlled. The default is to appear above the element.

<Stack direction="column" spacing={2} className="m-6">
	<Stack justifyContent="space-between">
		<Tooltip el='div' direction='tl' text='Topleft side tooltip'>
			<Button>Top Left</Button>
		</Tooltip>
		<Tooltip el='div' text='Top side tooltip'>
			<Button>Top</Button>
		</Tooltip>
		<Tooltip el='div' direction='tr' text='Topright side tooltip'>
			<Button>Top Right</Button>
		</Tooltip>
	</Stack>
	<Stack justifyContent="space-between">
		<Tooltip el='div' direction='l' text='Left side tooltip'>
			<Button>Left</Button>
		</Tooltip>
		<Tooltip el='div' direction='r' text='Right side tooltip'>
			<Button>Right</Button>
		</Tooltip>
	</Stack>
	<Stack justifyContent="space-between">
		<Tooltip el='div' direction='bl' text='Bottomleft side tooltip'>
			<Button>Bottom Left</Button>
		</Tooltip>
		<Tooltip el='div' direction='b' text='Bottom side tooltip'>
			<Button>Bottom</Button>
		</Tooltip>
		<Tooltip el='div' direction='br' text='Bottomright side tooltip'>
			<Button>Bottom Right</Button>
		</Tooltip>
	</Stack>
</Stack>

With Other Components

With icons

Tooltips should be used when icons are present without visible descriptions.

<ButtonGroup attached className="m-b-3">
	<Tooltip el='div' direction='br' text='Bold ⌘ + B'>
		<Button iconName='format_bold' />
	</Tooltip>
	<Tooltip el='div' open direction='b' text='Italic ⌘ + I'>
		<Button iconName='format_italic' />
	</Tooltip>
	<Tooltip el='div' direction='b' text='Underline ⌘ + U'>
		<Button iconName='format_underlined' />
	</Tooltip>
	<Tooltip el='div' direction='b' text='Strikethrough ⌘ + Shift + X'>
		<Button iconName='format_strikethrough' />
	</Tooltip>
	<Tooltip el='div' direction='b' text='Align Left ⌘ + Shift + L'>
		<Button iconName='format_align_left' />
	</Tooltip>
	<Tooltip el='div' direction='b' text='Align Center ⌘ + Shift + E'>
		<Button iconName='format_align_center' />
	</Tooltip>
	<Tooltip el='div' direction='bl' text='Align Right ⌘ + Shift + R'>
		<Button iconName='format_align_right' />
	</Tooltip>
</ButtonGroup>

With an Avatar

With a Progress Bar

With a Tag

With a Text

Open through a React Portal

Tooltips can be opened outside of the DOM hierarchy through a React portal. These ‘portaled’ tooltips:

Won't be clipped by the boundaries of a container, which has overflow: hidden property set
Are hoverable, they don't disappear when pointer moves over them, so the text content may be marked and copied

<div className="m-b-3">
	<Card style={{overflow: 'hidden'}}>
		<Tooltip open direction='t' portal text='Tooltip via portal'>
			<a href="#show-on-focus" className="m-x-3"><Icon name="report" size="24px" color="gray" /></a>
		</Tooltip>
		<Tooltip open direction='b' text='Regular tooltip'>
			<a href="#show-on-focus" className="m-x-3"><Icon name="help" size="24px" color="gray" /></a>
		</Tooltip>
		<Tooltip direction='t' portal width text='Rose Tico\nid: 0123456789'>
			<a href="#show-on-focus" className="m-x-3"><Icon name="account_circle" size="24px" color="gray" /></a>
		</Tooltip>
		<Tooltip direction='b' text='Charging, 80%'>
			<a href="#show-on-focus" className="m-x-3"><Icon name="battery_charging_80" size="24px" color="gray" /></a>
		</Tooltip>
	</Card>
</div>

Best Practices

Tooltips should be clear and concise.
Tooltips should appear with icon-only buttons.
Tooltips can be used to provide keyboard shortcuts.
Tooltips should supplement. Essential information should not be behind a component that only appears on hover.
Only one tooltip should be active at any point.
Avoid error or warning messages. Use one of the notification components instead.
Avoid messages longer than two lines in length.
Complex information, interactions, or needing a click state should use the Popover component.

For more complex content, use a Popover component.

Importing

import { Tooltip } from '@servicetitan/design-system';

Tooltip