Tooltip

Tooltip component.

template 1 required 4 optional 1 slot 0 a11y rules

Reference Guide

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):
        # Slots contain trusted application markup, not user input.
        self.text = 'Tooltip (top)'
        self.position = 'top'
        self.slot_content = '<button>Hover (top)</button>'
my_template.html
django
{% load theme_components %}
{% theme_tooltip text=text position=position slot_content=slot_content %}

Props

NameTypeRequiredDefaultDescription
textstrrequired—tooltip text
positionstrtoptop, bottom, left, right
css_prefixstr——
attrsdict——
slot_contentstr——

Accessibility

No additional accessibility rules are declared for this component. Keep its required semantic elements and labels when supplying the context.

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_theming/components.cssDefines 1 of this component's classes at line 1941. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
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>