Back
Popover
Basic Popover
Pro tip
Popovers are great for in-context help, user cards, or detailed previews.
A small arrow points back to the trigger element.
Hover Trigger
Shows on mouse enter, hides on mouse leave.
What is HTMX?
HTMX allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity of hypertext.
User Card (Click)
Usage
@overlays.Popover(overlays.PopoverProps{
Trigger: "hover", // "click" | "hover"
}) {
@overlays.PopoverTrigger() {
<span>Hover me</span>
}
@overlays.PopoverPanel(overlays.PopoverProps{
ShowArrow: true,
Align: "center",
}) {
<p>Content</p>
}
}