Overlays
Dialogs, tooltips, dropdowns, and drawers for layered interactions.
Modal
Dialog overlays for focused interactions. Closes on backdrop, Escape, or close button.
<button data-open-modal="my-modal">Open Modal</button>
<div id="my-modal" class="across-modal-overlay">...</div>
<!-- Sizes: .across-modal--sm, --lg, --xl -->
<script>AcrossUI.openOverlay('my-modal');</script>Tooltip
Contextual hints that appear on hover or focus with four positions.
<span class="across-tooltip-trigger">
<button>Hover me</button>
<span class="across-tooltip">Tooltip text</span>
</span>
<!-- Positions: default top, .across-tooltip--bottom, --left, --right -->Dropdown
Contextual menus with blur backdrop effect, supporting icons, labels, and dividers.
<div class="across-dropdown">
<button class="across-btn across-btn--secondary across-dropdown__trigger">Options <i class="ph-light ph-caret-down"></i></button>
<div class="across-dropdown__menu">
<a href="#" class="across-dropdown__item">Profile</a>
<div class="across-dropdown__divider"></div>
<a href="#" class="across-dropdown__item">Sign out</a>
</div>
</div>Drawer
Side-sliding panels for secondary content, filters, or mobile navigation.
<div class="across-drawer-backdrop" id="drawer-backdrop"></div>
<div class="across-drawer across-drawer--right" id="my-drawer">...</div>
<div class="across-drawer across-drawer--bottom" id="my-bottom">...</div>
<script>AcrossUI.openDrawer('my-drawer');</script>Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Structure: .across-alert-dialog > .across-alert-dialog__content.
Usage: Use for destructive actions or critical confirmations.
Popover
Displays rich content in a portal, triggered by a button.
Dimensions
Structure: .across-popover > .across-popover__trigger + .across-popover__content.
Interaction: Click to toggle. Closes on outside click.
Hover Card
For sighted users to preview content available behind a link.
Structure: Trigger with data-hover-card="ID" and target .across-hover-card with matching ID.
Interaction: Opens on hover with a slight delay. Closes when mouse leaves both trigger and card.