Tooltips

Offer short supplemental context on hover or keyboard focus. Essential instructions should remain visible.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<div class="ui-tooltip-host" x-data="uiDropdown" x-id="['tip']" @mouseenter="open = true" @mouseleave="open = false" @keydown.escape.stop="close">
  <button class="btn btn-secondary" x-ref="trigger" @focus="open = true" @blur="open = false" :aria-describedby="$id('tip')">Details</button>
  <span class="ui-tooltip" role="tooltip" :id="$id('tip')" x-show="open" x-cloak>Helpful context.</span>
</div>

Settings and behavior

Connect the trigger to the tooltip with aria-describedby.
Keep content short and noninteractive.
Escape dismisses the tooltip without moving users away from the trigger.

Integration notes

Ensure the host allows overflow. This lightweight pattern does not reposition around every viewport edge. Use visible inline help for essential instructions or constrained layouts.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921