Tooltip

A tooltip displays the name of or description for a related element on demand.

Anatomy

1. Text - tooltip text names or describes a related element.
   • If the related element does not have a name, the tooltip text is used to name it.
   • If the related element already has a name, the tooltip text is used to add description to the related element.
2. Arrow - a visual indicator that points to the related element.

Usage

Use tooltips when there is not enough physical space to display the name or description of an interactive element. Tooltips provide a mechanism for a simplifying the visual design of an interface. But in exchange, users will have a harder time understanding and discovering the role of the tooltipped element, so use them sparingly and thoughtfully.

Do

• Do use a tooltip to label an interactive element with no visible text such as a button with no text.
• Do use a tooltip to provide add additional descriptive information to a named element.

Don't

• Don't use a tooltip if the contents of the tooltip contain any meaningful markup such as italics, headings, or lists.
• Don't use a tooltip if the contents of the tooltip contain interactive elements, such as links, buttons, or form controls.

Use a tooltip...

• to name a control when there isn't enough space to display the label inline.
• to display an additional description about a control or element that already has an accessible name.

Naming and describing

In the Norton design system, a tooltip can only be used to name or describe its related element. This restriction ensures that the user experience of the tooltip is consistent for everyone.

Naming

A tooltip is said to be naming its related element when it is acting as a label for that element. For instance, an icon button's call to action could be captured as a tooltip to ensure that the purpose of the icon button is clear to everyone. If the element contains textual content and you also want to use a tooltip to add additional context, the tooltip should be a describing tooltip.

Naming tooltips & screen reader experience

When a tooltip names its related element, screen readers will read the value of the tooltip when they encounter the related element, entirely ignoring any textual content inside the element. For this reason, naming tooltips should only be used for elements that do not already contain textual content.

Describing

A tooltip is said to be describing its related element when it is acting as additional or supplemental information about an element that already has a name. For instance, an <input> that already has an associated <label> could use a tooltip to display help text about the expected input format.

Describing tooltips & screen reader experience

When a tooltip describes its related element, many screen readers will read the name of the related element, pause briefly, and then read the description contained in the tooltip.

React API

import { Tooltip } from '@wwnds/react';

Tooltip

Live Editor

function ButtonWithTooltip() {
	const [button, setButton] = React.useState(null);
	return (
		<div style={{ margin: '2rem 0' }}>
			<Button variant="solid" ref={setButton}>I'm a reference element</Button>
			<Tooltip
				isOpen
				placement="top"
				reference={button}
			>
				I'm a tooltip!
			</Tooltip>
		</div>
	);
}

Result

Loading...

Name	Description	Type
baseName	The base class name according to BEM conventions.	string
bodyClass	A className to apply to the body of the tooltip.	string
contentClass	A className to apply to the content. Default will be ${baseName}__content. @deprecated Use the bodyClass.	string
arrowClass	A className to apply to the arrow. Default will be ${baseName}__arrow. @deprecated - Use arrowElement.	string
asLabel	Indicates that the tooltip is labelling the reference. If false, the tooltip will be used as description. Reference: ARIA Practices - Providing Accessible Names and Descriptions	boolean
trigger	A space-separated string of events. Triggers can be any combination of the following: click focus focusin mouseenter pointerenter manual	string
isOpen	Used to control whether the popper is open or closed.	boolean
transition	The animation transition class applied to the popper as it enters or exits. A single name can be provided and it will be suffixed for each stage. For example, transition="fade" applies: fade-enter fade-enter-active fade-exit fade-exit-active fade-appear fade-appear-active Each individual stage can also be specified independently: transition={{ appear: 'my-appear', appearActive: 'my-appear-active', appearDone: 'my-appear-done', enter: 'my-enter', enterActive: 'my-enter-active', enterDone: 'my-enter-done', exit: 'my-exit', exitActive: 'my-exit-active', exitDone: 'my-exit-done' }} Reference: react-transition-group's CSSTransition.	string | CSSTransitionClassNames
reference	The reference element that the popper will be attached to. Popper.js - createPopper	Element | VirtualElement | null
arrowElement	The element that should be used for the arrow. See the arrow modifier's element option for more details.	string | HTMLElement | null
distance	The offset distance (in pixels) from the reference. Will only be used if offset is undefined.	number
boundary	The element or area where the popper will be checked against for overflow. See the preventOverflow modifier's boundary option for more details.	Boundary
placement	The Popper.js placement option.	Placement
modifiers	The Popper.js modifiers option.	Partial<Modifier<any, any>>[]
strategy	The Popper.js strategy option.	PositioningStrategy
onFirstUpdate	The Popper.js onFirstUpdate option.	((arg0: Partial<State>) => void)
hideDelay	The duration in milliseconds that should elapse before closing, beginning after the pointer exits the reference's bounding box. Only has an effect for the mouseenter or pointerenter triggers.	number
showDelay	The duration in milliseconds that should elapse before opening, beginning after isOpen is set to true.	number