Guidelines

Use When

Don’t Use When

Visual Language

Do
center the tooltip’s tail on its associated object, even if the tooltip’s balloon is offset.
Don‘t
offset the tooltip’s tail or orient and/or move the tooltip locked with the cursor.

Editorial

Keep it brief, using fewer than 10 words.

End full sentences with a period. Using “&” is OK. No “!” If you have an “!” you probably need an error or warning state instead.

Don’t spell out numbers: Use 12, not twelve.

Accessibility

If the tooltip’s target element is an .mds-text__anchor, or an .mds-button, the tip should show on focus and hide on blur.

Use all standard MDS role=”” attributes on .mds-tooltip_target as appropriate.

Always use role=”tooltip” on the .mds-tooltip element.

Use aria-hidden="true" to prevent screenreader from reading hidden tooltips. Change value to false when Tooltip is visible.

Tooltip trigger element should have a aria-describedby attribute which references to the ID of the associated Tooltip.

Add aria-labelledby to Tooltip to associate full content of a Tooltip.

Code Reference

CSS Class References

Class

Applies to

Outcome

.mds-tooltip

<div>

This class initializes a <div> with the basic styles shared across all tooltips.

.mds-tooltip__text

.mds-tooltip <div>

This class is always applied to a <div> and is the immediate child of .mds-tooltip. It is needed to properly apply the MDS spacing system to the component.

.mds-tooltip__wrapper

Any block, or inline-block element, most likely a <div>

This class should be on the immediate parent of the tooltip’s target element, and it must wrap the target and the tooltip itself. If the tooltip is triggered on hover, this is the element on which that hover is triggered.

.mds-tooltip__target

Any inline, block, or inline-block element

This is used to enable showing/hiding the tooltip on keyboard focus of a focusable tooltip target element. For example, if the tooltip target is an <a> or <button>, focusing the element will show the tip.