Tooltip

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<Tooltip content="This is a tooltip" />

<Tooltip content="This is a tooltip" />

Introduction

import { Tooltip } from '@telus-uds/ds-allium'

Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label to help a user fill the input, or as a standalone component.

Guidance

• You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
• Tooltips may also be useful when vertical space is an issue.

By default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach a tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).

Loading...

<Tooltip content="Amazing 😍"> <span>Click on this text to open the tooltip</span> </Tooltip>

<Tooltip content="Amazing 😍">
  <span>Click on this text to open the tooltip</span>
</Tooltip>

Positioning

By default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport. You may use the position prop to suggest a position - it will be used, unless the tooltip would end up outside the viewport.

Loading...

<Tooltip content="This tooltip's position is forced to left" position="left" />

<Tooltip content="This tooltip's position is forced to left" position="left" />

Accessibility

Tooltip's control is announced as a button with a label encouraging interaction. When open, the Tooltip receives an alert role, so that it's appearance is picked up by screen readers.

Platform considerations

The component is available on both native platforms and web.

Props

Name	Type	Default	Description
children	func | node		Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the pressable state and tooltip variant as an argument.
content	string | node		The message. Can be raw text or text components.
copy	'en' | 'fr'	'en'	Select English or French copy for the accessible label.
position	'auto' | 'above' | 'right' | 'below' | 'left'	'auto'	Use to place the tooltip in a specific location (only if it fits within viewport).
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type
tokens	backgroundColor	color
	paddingTop	size
	paddingBottom	size
	paddingLeft	size
	paddingRight	size
	borderRadius	radius
	shadow	shadow
	color	color
	fontSize	fontSize
	lineHeight	lineHeight
	fontName	fontName
	fontWeight	fontWeight
	arrowWidth	size
	arrowBorderRadius	radius
	arrowOffset	size

Figma

Variants

Inverse

• Use on dark backgrounds.

Loading...

<div style={{ backgroundColor: 'black', padding: 20 }}> <Tooltip content="This is a tooltip" variant={{ inverse: true }} /> </div>

<div style={{ backgroundColor: 'black', padding: 20 }}>
  <Tooltip content="This is a tooltip" variant={{ inverse: true }} />
</div>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support