Components

Tooltip

Built on interestfor and popover="hint". It appears on hover, on keyboard focus, and on a long press — which is what makes it work on touch screens, unlike the old tooltip.

On this page

Placement
Styles
On any element
Why popover="hint"

<button class="pui-btn pui-outline pui-surface" interestfor="help">?</button>

<div class="pui-tooltip" id="help" popover="hint">
  We never share your email.
</div>

interestfor names the tooltip, and that is the whole API.

Placement

The tooltip sits above its trigger and flips below when there is no room. Three classes move it elsewhere:

<div class="pui-tooltip pui-bottom" id="help" popover="hint">Below</div>
<div class="pui-tooltip pui-start" id="help" popover="hint">Before</div>
<div class="pui-tooltip pui-end" id="help" popover="hint">After</div>

Class	Where it goes
(none)	above
`pui-bottom`	below
`pui-start`	to the left, or the right in RTL
`pui-end`	to the right, or the left in RTL

Styles

A tooltip is an ordinary colorable element, so it takes any style and color pair:

<div class="pui-tooltip pui-solid pui-inverse" popover="hint">Dark</div>
<div class="pui-tooltip pui-solid pui-theme" popover="hint">Theme</div>
<div class="pui-tooltip pui-soft pui-warn" popover="hint">A warning</div>

On any element

CLS

<span interestfor="definition" tabindex="0">CLS</span>
<div class="pui-tooltip" id="definition" popover="hint">
  Cumulative Layout Shift
</div>

Why `popover="hint"`

A hint can appear while a menu is open without closing it, which a regular popover cannot do. Where the browser does not know the value yet it behaves as a normal popover, so the tooltip still works.