Overlays

Tooltip

A short text that appears when you point at an element or move to it with the keyboard.

Basic

HTML

<button class="pw-btn" data-pw-tip="Saved a moment ago">Save</button>
<button class="pw-btn" data-pw-tip="Opens in a new tab" data-tip-place="bottom">Bottom</button>
<button class="pw-btn" data-pw-tip="On the left" data-tip-place="left">Left</button>
<button class="pw-btn" data-pw-tip="On the right" data-tip-place="right">Right</button>

On an icon button

A tooltip is extra help. A button with only an icon still needs its own name in aria-label.

A link with no delay

HTML

<button class="pw-btn pw-btn--icon" aria-label="Copy link" data-pw-tip="Copy link">
  <svg class="pw-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 9h11v11H9zM5 15H4V4h11v1"/></svg>
</button>
<a href="#main" data-pw-tip="Links can have a tooltip too" data-tip-delay="0">A link with no delay</a>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-pw-tip`		The text.
`data-tip-place`	`top`	`top`, `bottom`, `left` or `right`. Flips when there is no room.
`data-tip-delay`	`350`	Milliseconds before it shows on hover.

From your script

Partwise.tooltip.show('#save');
Partwise.tooltip.hide();

Keyboard

Key	Action
`Tab`	Moving to the element shows the tooltip
`Esc`	Hide it

Good to know

The tooltip stays while the pointer is over it, so people can read or select the text.
It is linked to its element with aria-describedby while it shows.
Tooltips do not show on touch screens, because there is no hover. Do not put anything in a tooltip that people must know.
Text only. For links or buttons use a popover.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/14-tooltip-popover.css, js/14-tooltip-popover.js.