Skip to content
Agon ĀtriumAgon Ātrium

Source code

Open source page

Popovers

Show a small amount of optional content from an explicit disclosure button.

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="dropdown" x-data="uiDropdown" x-id="['popover']" @click.outside="open = false" @keydown.escape.stop="close">
  <button class="btn btn-secondary" x-ref="trigger" @click="toggle" :aria-expanded="open" :aria-controls="$id('popover')">More information</button>
  <div class="ui-popover" :id="$id('popover')" x-show="open" x-cloak><p>Additional context.</p></div>
</div>

Settings and behavior

  • Use aria-expanded and aria-controls on the trigger.
  • Escape returns focus to the trigger.
  • Keep the host outside clipping containers.

Integration notes

Use a dialog for interactive forms or complex focus management. This small disclosure has no automatic collision detection.

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