Popover
Floating panel for additional content. Larger than tooltip, can contain structured content.
Default
Popover content goes here. Can contain multiple paragraphs and other elements.
Base
| Class | Description |
|---|---|
.ui-popover | Base class |
Position
| Class | Value |
|---|---|
.ui-popover--top | top |
.ui-popover--bottom | bottom |
.ui-popover--visible | visible |
.ui-popover--hidden | hidden |
.ui-popover--animate | animate |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-popover-bg |
var(--ui-color-bg) |
Background color |
--ui-popover-border-color |
var(--ui-color-border) |
Border color |
--ui-popover-radius |
var(--ui-radius-md) |
Corner radius |
--ui-popover-shadow |
0 calc(var(--ui-unit) / 2) calc(var(--ui-unit) * 2) rgb(0 0 0 / 0.15) |
Box shadow |
--ui-popover-padding |
calc(var(--ui-unit) * 2) |
Padding on all sides |
--ui-popover-max-width |
calc(var(--ui-unit) * 40) |
Maximum width |
--ui-popover-z |
var(--ui-z-index-popover) |
Z-index stacking order |
--ui-popover-arrow-size |
calc(var(--ui-unit)) |
Arrow size |
With Header
Popover Title
Content with a header section.
<div class="ui-popover ui-relative">
<header class="ui-popover__header">
<h3 class="ui-popover__title">Popover Title</h3>
</header>
<p>Content with a header section.</p>
</div>Positions
Top (arrow down)
Bottom (arrow up)
<div style="padding: var(--ui-space-4);">
<div class="ui-popover ui-popover--top ui-relative">
<p>Top (arrow down)</p>
</div>
</div>
<div style="padding: var(--ui-space-4);">
<div class="ui-popover ui-popover--bottom ui-relative">
<p>Bottom (arrow up)</p>
</div>
</div>Visibility
Visible and animated
Hidden popover
<!-- Control popover visibility and animation. -->
<div class="ui-popover ui-popover--visible ui-popover--animate ui-relative">
<p>Visible and animated</p>
</div>
<div class="ui-popover ui-popover--hidden ui-relative">
<p>Hidden popover</p>
</div>