Tooltip

Implemented Overlay

Hover and focus tooltip with grouped delays, Escape dismissal and viewport bounds.

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

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

Top

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" id="tip_top" side="top" content="Add new item" %}
{% include "wdj/components/button.html" with label="" icon="plus" shape="square" aria_label="Add new item" only %}
{% endwdj_component %}

Bottom

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" id="tip_bottom" side="bottom" content="Helpful information" %}
{% include "wdj/components/button.html" with label="Bottom tooltip" only %}
{% endwdj_component %}

Left

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" id="tip_left" side="left" content="Helpful information" %}
{% include "wdj/components/button.html" with label="Left tooltip" only %}
{% endwdj_component %}

Right

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" id="tip_right" side="right" content="Helpful information" %}
{% include "wdj/components/button.html" with label="Right tooltip" only %}
{% endwdj_component %}

Icon button

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" id="tip_icon" content="Add item" %}
{% include "wdj/components/button.html" with icon="plus" shape="square" aria_label="Add item" only %}
{% endwdj_component %}

Disabled button

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" id="tip_disabled" content="You need edit access" %}
<span tabindex="0" aria-label="Unavailable action">{% include "wdj/components/button.html" with label="Create worker" disabled=True only %}</span>
{% endwdj_component %}

Grouped tooltips

Show template

{% load wdj %}
<div class="flex flex-wrap gap-2">{% wdj_component "wdj/components/tooltip.html" content="First control details" delay_ms=400 %}
{% include "wdj/components/button.html" with label="First control" only %}
{% endwdj_component %}{% wdj_component "wdj/components/tooltip.html" content="Second control details" delay_ms=400 %}
{% include "wdj/components/button.html" with label="Second control" only %}
{% endwdj_component %}</div>

Long content

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" content="A longer explanation wraps within the available viewport and remains readable on narrow layouts." %}
{% include "wdj/components/button.html" with label="Detailed tooltip" only %}
{% endwdj_component %}

Delay control

Show template

{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" content="Shown after a short delay; keyboard focus is immediate." delay_ms=600 %}
{% include "wdj/components/button.html" with label="Delayed tooltip" only %}
{% endwdj_component %}

API Reference

Prop	Type	Default	Description
content	string	unset	Content; pass the documented value shown in the examples.
trigger	string / HTML slot	unset	Trigger; 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.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
side	string	top	Side; pass the documented value shown in the examples.
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
delay_ms	number	0	Delay ms; 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