Tooltips
Clarify the purpose of a compact control on hover and keyboard focus.
Live preview
This action opens your settings
HTML
<span class="xsh-tooltip-shell">
<button class="xsh-button xsh-button--secondary" aria-describedby="xsh-tooltip-demo">Hover or focus me</button>
<span class="xsh-tooltip" id="xsh-tooltip-demo" role="tooltip">This action opens your settings</span>
</span>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-tooltip-shell | Used by the example markup and component styles or behavior. |
xsh-tooltip | Used by the example markup and component styles or behavior. |
aria-describedby | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Tooltip content appears on hover and focus. Provide an aria-describedby reference and avoid critical instructions inside tooltips.
Implementation note. Use visible labels for essential actions. Tooltip content must not contain interactive elements.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.