data-popover
A lightweight wrapper around the native Popover API:
GitHub,
jsDelivr,
npm
Table of Contents
Trigger element
You can use any element to trigger a popover. To do so, add the
data-popover attribute to a trigger element and follow it
immediately with a popover element, which has the native
popover attribute.
Hover Triggers
| 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.
Placement
Set a preferred placement direction by passing a value to the
data-popover attribute.
Popover
Popover
Popover
Pop
Pop
Pop
Pop
Pop
Pop
Popover
Popover
Popover
Auto-flipping
Popovers flip automatically when you scroll the page. You can define 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, see the
DEFAULT_PLACEMENT_FALLBACK variable.
Styling
Customize the appearance using the CSS variables at the top of
data-popover.css.
The following is an example of a dark theme:
HTMx integration
Lazy-loading popover content
Listen to the data-popover:show event to load popover content
when it's shown.
Loading ...
Popover preservation between component reloads
Preserve an open popover using hx-preserve. Note that you also
have to preserve the popover trigger element. The easiest way is to add
hx-preserve to their wrapper.
Recipes
Scrollable Popover
To make a popover scrollable, apply max-height and
overflow-y: auto to a nested element inside the popover, not
the popover element itself.
A goal of perception is to estimate true properties of the world. A
goal of categorization is to classify its structure. Aeons of
evolution have shaped our senses to this end. These three assumptions
motivate much work on human perception. I here argue, on evolutionary
grounds, that all three are false. Instead, our perceptions constitute
a species-specific user interface that guides behavior in a niche.
Just as the icons of a PC's interface hide the complexity of the
computer, so our perceptions usefully hide the com- plexity of the
world, and guide adaptive behavior. This interface theory of
perception offers a framework, motivated by evolution, to guide
research in object categorization. This framework informs a new class
of evolutionary games, called interface games, in which pithy
perceptions often drive true perceptions to extinction.
The Interface Theory of Perception
Nested Popovers
Nested popovers just work as expected.
This is a nested popover!