data-popover
Trigger element
Any element could trigger a popover. Just add the
data-popover attribute to it and place a popover element with
the native `popover` attribute immediately after it.
Placement
You can define a preferred placement direction by passing a value to the
data-popover attribute.
Popover
Popover
Popover
Popover
Popover
Popover
Popover
Popover
Popover
Popover
Popover
Popover
Auto-flipping
As you probably noticed, the above popovers flipped when you scroll the
page. You can set up a flip fallback sequence using the
data-popover-placement-fallback attribute. Its value is a
space-separated sequence of short direction notations, e.g.,
"t ls l" means "top left-start left". For the default sequence
for each direction, look at the DEFAULT_PLACEMENT_FALLBACK
variable.
Hover Triggers
Popover
I appear after 500ms!
| Attribute |
Description |
Default |
data-popover-trigger="hover" |
show the popover on hover |
"click" |
data-popover-hover-delay="500" |
delay in milliseconds before showing the popover on hover |
150 |
data-popover-hover-out-delay="100" |
delay in milliseconds before hiding the popover on mouse leave |
150 |
Hover triggers automatically fall back to click on touch devices.
HTMX integration
You can listen to the `data-popover:show` event to load popover
content when it's shown
Loading ...
Styling
Appearance customization is supported via CSS variables you can find at the
top of
data-popover.css.
Customize the popover appearance using CSS custom properties. Here's a dark
theme:
Nested Popovers
This is a nested popover!