Tooltip and popover
Two ways to say a little more. A tooltip is a short text hint taken from data-iv-tooltip, shown on hover with a small delay and immediately on focus, and described to assistive technology through aria-describedby. A popover is rich content built on the native popover attribute: it opens and closes without JavaScript, lives in the top layer and dismisses on outside clicks and Escape; the component adds placement next to the invoker, focus handling and events.
Tooltip
<div class="iv-stack" data-iv-component="tooltip">
<div class="iv-cluster">
<button class="iv-button iv-button--secondary" type="button" data-iv-tooltip="There is no room above this button, so the label flips below it">Close to the top edge</button>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0">Sample controls: none of the buttons on this page does anything. Point at one and its label appears after a moment; move the keyboard focus to it and the label appears at once. Escape dismisses it.</p>
<div class="iv-cluster">
<button class="iv-button" type="button" data-iv-tooltip="Exports the current view as CSV">Export</button>
<button class="iv-button" type="button" data-iv-tooltip="Sends a copy to everyone listed as a reviewer of this report">Send for review</button>
<a href="#tooltip-note" data-iv-tooltip="Jumps to the note at the end of this page">Read the note</a>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0" id="tooltip-note">The label is complementary: every control above is also readable without it, because without JavaScript there is no tooltip at all. The text lives in <code>data-iv-tooltip</code> and reaches assistive technology through <code>aria-describedby</code> while it is on screen.</p>
</div>// data-iv-component="tooltip"
{
tooltip: "There is no room above this button, so the label flips below it",
}| Option | Attribute (on the root) | Default | Effect |
|---|---|---|---|
delay | data-iv-delay | 300 | Milliseconds before a hovered tooltip appears; focus shows it at once. |
placement | data-iv-placement | top | top or bottom; flips when there is no room. |
Methods show(target), hide(), destroy(); events iv:show (cancelable) then iv:shown, iv:hide then iv:hidden. Tooltips are for hints, never for the only explanation: without JavaScript they do not exist.
Popover
<div class="iv-stack iv-texture-mesh iv-u-p-6" style="min-block-size: 17rem; border-radius: 0.75rem">
<div class="iv-cluster">
<button class="iv-button iv-button--secondary" type="button" popovertarget="pop-share">Share this report</button>
<button class="iv-button iv-button--secondary" type="button" popovertarget="pop-plan">Plan details</button>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0" id="popover-note">Made-up data: no report is shared and no plan is billed. Both panels are native <code>popover</code> elements, so they open without JavaScript too; with JavaScript they sit next to the button that opened them, and the focus goes into the panel and comes back on close. The mesh behind the buttons is only there to show the glass panel against something.</p>
</div>
<div class="iv-popover" id="pop-share" popover data-iv-component="popover">
<h3 class="iv-popover__title">Share this report</h3>
<p class="iv-u-text-sm">Anyone with the link would be able to read the report, but not to edit it. Nothing is shared from this page.</p>
<a href="#popover-note">Read what this panel stands for</a>
</div>
<div class="iv-popover iv-popover--arrow iv-popover--glass" id="pop-plan" popover data-iv-component="popover" data-iv-align="end">
<h3 class="iv-popover__title">Team plan</h3>
<p class="iv-u-text-sm iv-u-m-0">Invented figures: 24 seats in use of 30, renewed every March. The panel is aligned to the end of its button and carries the arrow and the glass surface.</p>
</div>// data-iv-component="popover"
{
align: "end",
}| Option | Attribute | Default | Effect |
|---|---|---|---|
placement | data-iv-placement | bottom | bottom or top; flips when there is no room. |
align | data-iv-align | start | start, center or end relative to the invoker. |
offset | data-iv-offset | 8 | Gap in pixels between invoker and popover. |
focus | data-iv-focus | true | Move focus into the popover when it opens and back to the invoker when it closes. |
Methods open(), close(), toggle(), destroy(); read isOpen and invoker. Events iv:open/iv:close (cancelable, mapped from the native beforetoggle) then iv:opened/iv:closed. iv-popover--arrow adds a pointer and iv-popover--glass the glass surface.
Without JavaScript
The tooltip is absent. The popover works through the native attribute: it opens from its popovertarget button, closes on outside clicks and Escape, but sits centred in the viewport rather than next to its button.
Common mistakes
- Putting actions in a tooltip: it cannot be hovered on touch screens and is never focusable. Use a popover.
- Menus as popovers: use the dropdown, which has the keyboard pattern for menu items.
- Nested popovers: out of scope.