Desktop components

Tooltips

A tooltip shows the name or purpose of a control when people hover over it.

When to use it

Use a tooltip for icon-only buttons and truncated labels. Avoid putting information in a tooltip that people need to complete a task. Touch devices never see it.

Preview

Usage

Add the attribute to any element. No extra markup, no JavaScript:

<button class="p-button" type="button"
  data-p-tooltip="Duplicate this file">
  <i class="ph-bold ph-copy" aria-hidden="true"></i>
</button>

The tooltip renders centered under the element with a 4px gap. data-p-tooltip-pos="top" places it above. The host element is given position: relative by the stylesheet, so avoid the attribute on elements that rely on a different position value.

The tooltip appears 0.5 seconds after hover begins, like the native delay, and hides immediately on leave. It also appears on :focus-visible, so keyboard people get the same information.

Anatomy

The box is 18px tall with square corners, the only unrounded surface in the framework. The fill is a near-opaque rgba(236, 236, 236, 0.88) with no blur. Text is 11px at weight 510 in #1A1A1A with 6px side padding. Two shadows give it an edge: 0 2px 8px at 20% and 0 0 2px at 40%.

The tooltip ignores pointer events, so it never blocks the control underneath it.

Dark mode

The fill switches to black at 50% over a 10px blur, with a 0.6px inner rim of white at 15%. Text switches to #F5F5F5. The shadow stays the same as in light mode. Both .p-dark-mode and .p-auto-dark-mode are supported.

Accessibility

Copied