Components
Tooltip
Hover and focus hints on the Popover API with Interest Invokers and anchor positioning.
A tooltip pairs a trigger with a .tooltip__content hint (popover="hint"). Wire them with
interestfor on the trigger. Hover, focus, and long-press all work automatically, ARIA
included. Position the hint with data-side.
The hint holds a <span class="tooltip__arrow" aria-hidden="true"></span> that points back at
the trigger, and carries data-use-inverted-menu="false" to opt out of the inverted dark
popover scheme.
Default
Loading components…
<div class="tooltip"> <button type="button" class="button" interestfor="tooltip-example-default-1">Hover</button> <div class="tooltip__content" id="tooltip-example-default-1" popover="hint" data-use-inverted-menu="false"> Add to library <span class="tooltip__arrow" aria-hidden="true"></span> </div></div>With keyboard shortcut
Loading components…
<div class="tooltip"> <button type="button" class="button" data-variant="muted" data-size="icon" interestfor="tooltip-example-save-1" aria-label="Save"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <path fill="currentColor" d="M74.34,85.66A8,8,0,0,1,85.66,74.34L120,108.69V24a8,8,0,0,1,16,0v84.69l34.34-34.35a8,8,0,0,1,11.32,11.32l-48,48a8,8,0,0,1-11.32,0ZM240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H84.4a4,4,0,0,1,2.83,1.17L111,145A24,24,0,0,0,145,145l23.8-23.8A4,4,0,0,1,171.6,120H224A16,16,0,0,1,240,136Zm-40,32a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z" /> </svg> </button> <div class="tooltip__content" id="tooltip-example-save-1" popover="hint" data-use-inverted-menu="false"> Save <kbd>⌘</kbd> <kbd>S</kbd> <span class="tooltip__arrow" aria-hidden="true"></span> </div></div>Sides
Loading components…
<div class="flex flex-wrap items-center gap-md"> <div class="tooltip"> <button type="button" class="button" interestfor="tooltip-example-left-1">Left</button> <div class="tooltip__content" id="tooltip-example-left-1" popover="hint" data-side="left" data-use-inverted-menu="false"> Tooltip on left <span class="tooltip__arrow" aria-hidden="true"></span> </div> </div> <div class="tooltip"> <button type="button" class="button" interestfor="tooltip-example-top-1">Top</button> <div class="tooltip__content" id="tooltip-example-top-1" popover="hint" data-side="top" data-use-inverted-menu="false"> Tooltip on top <span class="tooltip__arrow" aria-hidden="true"></span> </div> </div> <div class="tooltip"> <button type="button" class="button" interestfor="tooltip-example-bottom-1">Bottom</button> <div class="tooltip__content" id="tooltip-example-bottom-1" popover="hint" data-side="bottom" data-use-inverted-menu="false"> Tooltip on bottom <span class="tooltip__arrow" aria-hidden="true"></span> </div> </div> <div class="tooltip"> <button type="button" class="button" interestfor="tooltip-example-right-1">Right</button> <div class="tooltip__content" id="tooltip-example-right-1" popover="hint" data-side="right" data-use-inverted-menu="false"> Tooltip on right <span class="tooltip__arrow" aria-hidden="true"></span> </div> </div></div>Disabled trigger
Loading components…
<div class="tooltip"> <button type="button" class="button" aria-disabled="true" interestfor="tooltip-example-disabled-1"> Disabled </button> <div class="tooltip__content" id="tooltip-example-disabled-1" popover="hint" data-use-inverted-menu="false"> This action is unavailable <span class="tooltip__arrow" aria-hidden="true"></span> </div></div>API
| Attribute | Where | Values |
|---|---|---|
interestfor | trigger | id of the .tooltip__content |
data-side | .tooltip__content | top, bottom, left, right |
data-align | .tooltip__content | center |
data-use-inverted-menu | .tooltip__content | false |