Popover

Implemented Overlay

Anchored popup with interactive content.

Kumo reference: kumo-ui.com/components/popover/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Basic

Show template

{% load wdj %}
{% include "wdj/components/popover.html" with id="popover_basic" shape="square" icon="bell" aria_label="Notifications" title="Notifications" description="You are all caught up. Good job!" only %}

Form

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="popover_form" trigger_label="Form"  %}
<form data-demo-form class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="popover_email" label="Email" type="email" required=True only %}{% include "wdj/components/button.html" with label="Subscribe" type="submit" only %}
</form>
{% endwdj_component %}

Top

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="popover_top" trigger_label="Top" side="top" %}
<p class="text-base">Notifications are up to date.</p>
{% endwdj_component %}

Start aligned

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="popover_start_aligned" trigger_label="Start aligned" align="start" %}
<p class="text-base">Notifications are up to date.</p>
{% endwdj_component %}

Centered

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="popover_centered" trigger_label="Centered" align="center" %}
<p class="text-base">Notifications are up to date.</p>
{% endwdj_component %}

End aligned

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="popover_end_aligned" trigger_label="End aligned" align="end" %}
<p class="text-base">Notifications are up to date.</p>
{% endwdj_component %}

Scrollable content

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="audit-scroll-popover" trigger_label="Scrollable popover" %}
{% for option in audit_long_options %}<p class="py-2 text-base">{{ option.label }}</p>{% endfor %}
{% endwdj_component %}

Explicit close button

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="audit-close-popover" trigger_label="Popover with close" %}
<p class="text-base">Dismiss this panel using its close control.</p><button type="button" popovertarget="audit-close-popover" popovertargetaction="hide" class="mt-2 h-7 rounded-md px-2 ring-1 ring-kumo-line">Close</button>
{% endwdj_component %}

Open on hover

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="audit-hover-popover" trigger_label="Hover popover" open_on_hover=True %}
<p class="text-base">Hover or focus keeps the panel available.</p>
{% endwdj_component %}

Pointer anchor

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="audit-virtual-popover" trigger_label="Pointer-position popover" virtual_anchor=True %}
<p class="text-base">This panel opens at the triggering pointer position.</p>
{% endwdj_component %}

API Reference

Prop	Type	Default	Description
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
trigger	string / HTML slot	unset	Trigger; pass the documented value shown in the examples.
trigger_label	string	unset	Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text.
title	string	unset	Title; pass the documented value shown in the examples.
description	string	unset	Description; pass the documented value shown in the examples.
shape	string	unset	Shape; pass the documented value shown in the examples.
icon	string	unset	Icon; pass the documented value shown in the examples.
aria_label	string	unset	Aria label; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
side	string	bottom	Side; pass the documented value shown in the examples.
align	string	start	Align; pass the documented value shown in the examples.
open_on_hover	bool	False	Open on hover; pass the documented value shown in the examples.
virtual_anchor	bool	False	Virtual anchor; pass the documented value shown in the examples.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract