Tooltip

Tooltip component.

template 1 required4 optional1 slot0 a11y rules

ReferenceGuide

Preview

position
python
tooltip(text='Tooltip (top)', position='top', is_visible=False)
More examples

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.text = 'Tooltip (top)'
my_template.html
django
{% load theme_components %}
{% theme_tooltip text=text position='top' %}

Props

NameTypeRequiredDefault
textstrrequired—
positionstrtop
css_prefixstr—
attrsdict—
slot_contentstr—

Slots

slot_content
Source & styles
FilePathNotes
templatedjust_theming/components/tooltip.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_components/components.cssDefines 1 of this component's classes at line 116. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
Template source — tooltip.html
django
<span class="{{ css_prefix }}tooltip {% if attrs.class %}{{ attrs.class }}{% endif %}"
      data-tooltip="{{ text }}"
      data-tooltip-position="{{ position }}"
      aria-describedby="{{ tooltip_id }}"
      {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>{% if slot_content %}{{ slot_content|safe }}{% else %}{{ text }}{% endif %}<span id="{{ tooltip_id }}" role="tooltip" hidden>{{ text }}</span></span>