Tooltip
LIVE PREVIEW 4
tooltip(text=Tooltip (top), position=top, slot_content=<button>Hover (top)</button>)
tooltip(text=Tooltip (bottom), position=bottom, slot_content=<button>Hover (bottom)</button>)
tooltip(text=Tooltip (left), position=left, slot_content=<button>Hover (left)</button>)
tooltip(text=Tooltip (right), position=right, slot_content=<button>Hover (right)</button>)
USAGE
{%{% endverbatim %} load theme_components {% verbatim %}%}
{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}
PROPS — REQUIRED 1
| Name | Type | Default |
|---|---|---|
text |
str |
— |
PROPS — OPTIONAL 4
| Name | Type | Default |
|---|---|---|
position |
str |
top |
css_prefix |
str |
— |
attrs |
dict |
— |
slot_content |
str |
— |
AVAILABLE SLOTS 1
slot_content
TEMPLATE SOURCE
<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>