feat: render tooltips

This commit is contained in:
Björn Fromme
2026-03-16 11:59:10 +01:00
parent 787f69fc46
commit 9d2474c1e3
+51 -22
View File
@@ -46,6 +46,11 @@
{%- block form_widget_simple -%} {%- block form_widget_simple -%}
{%- set type = type|default('text') -%} {%- set type = type|default('text') -%}
{%- set tooltip = null -%}
{%- if attr['data-tooltip'] is defined -%}
{%- set tooltip = attr['data-tooltip'] -%}
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
{%- endif -%}
{%- if type != 'hidden' -%} {%- if type != 'hidden' -%}
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%} {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
{%- if errors|length -%} {%- if errors|length -%}
@@ -55,13 +60,20 @@
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
{%- endif -%} {%- endif -%}
{%- endif -%} {%- endif -%}
{{ parent() }} <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
{%- if disabled is defined and disabled == true -%} {{ parent() }}
<input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}"> {%- if disabled is defined and disabled == true -%}
{%- endif -%} <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
{%- endif -%}
</div>
{%- endblock form_widget_simple -%} {%- endblock form_widget_simple -%}
{%- block textarea_widget -%} {%- block textarea_widget -%}
{%- set tooltip = null -%}
{%- if attr['data-tooltip'] is defined -%}
{%- set tooltip = attr['data-tooltip'] -%}
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
{%- endif -%}
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%} {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
{%- if errors|length -%} {%- if errors|length -%}
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
@@ -69,20 +81,27 @@
{%- if disabled is defined and disabled == true -%} {%- if disabled is defined and disabled == true -%}
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
{%- endif -%} {%- endif -%}
{{ parent() }} <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
{%- if disabled is defined and disabled == true -%} {{ parent() }}
<input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}"> {%- if disabled is defined and disabled == true -%}
{%- endif -%} <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
{%- endif -%}
</div>
{%- endblock textarea_widget -%} {%- endblock textarea_widget -%}
{%- block checkbox_widget -%} {%- block checkbox_widget -%}
{%- set attr = attr|filter((v, k) => k != 'tooltip') -%} {%- set tooltip = null -%}
{%- if attr['data-tooltip'] is defined -%}
{%- set tooltip = attr['data-tooltip'] -%}
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
{%- endif -%}
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%} {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%}
{%- if errors|length -%} {%- if errors|length -%}
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%}
{%- endif -%} {%- endif -%}
{%- set tooltip = null -%} <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} /> <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
</div>
{%- endblock checkbox_widget -%} {%- endblock checkbox_widget -%}
{%- block radio_widget -%} {%- block radio_widget -%}
@@ -91,9 +110,9 @@
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%}
{%- endif -%} {%- endif -%}
{%- set tooltip = null -%} {%- set tooltip = null -%}
{%- if attr.tooltip is defined -%} {%- if attr['data-tooltip'] is defined -%}
{%- set tooltip = attr.tooltip -%} {%- set tooltip = attr['data-tooltip'] -%}
{%- set attr = attr|filter((v, k) => k != 'tooltip') -%} {%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
{%- endif -%} {%- endif -%}
<div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}> <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
<input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} /> <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
@@ -102,8 +121,8 @@
{% block checkbox_row %} {% block checkbox_row %}
{%- set tooltip = null -%} {%- set tooltip = null -%}
{%- if form.vars.attr.tooltip is defined -%} {%- if form.vars.attr['data-tooltip'] is defined -%}
{%- set tooltip = form.vars.attr.tooltip -%} {%- set tooltip = form.vars.attr['data-tooltip'] -%}
{%- endif -%} {%- endif -%}
<div class="{{ html_classes({ 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}" {% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}> <div class="{{ html_classes({ 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}" {% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
<label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'pointer-events-none': form.vars.attr.readonly is defined }) }}"> <label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'pointer-events-none': form.vars.attr.readonly is defined }) }}">
@@ -119,6 +138,11 @@
{% endblock %} {% endblock %}
{%- block choice_widget_collapsed -%} {%- block choice_widget_collapsed -%}
{%- set tooltip = null -%}
{%- if attr['data-tooltip'] is defined -%}
{%- set tooltip = attr['data-tooltip'] -%}
{%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
{%- endif -%}
{%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%} {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
{%- if errors|length -%} {%- if errors|length -%}
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
@@ -126,13 +150,15 @@
{%- if disabled is defined and disabled == true -%} {%- if disabled is defined and disabled == true -%}
{%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
{%- endif -%} {%- endif -%}
{%- if attr.readonly is defined %} <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
<div class="cursor-not-allowed"> {%- if attr.readonly is defined %}
<div class="cursor-not-allowed">
{{ parent() }}
</div>
{% else %}
{{ parent() }} {{ parent() }}
</div> {% endif %}
{% else %} </div>
{{ parent() }}
{% endif %}
{%- endblock choice_widget_collapsed -%} {%- endblock choice_widget_collapsed -%}
{%- block choice_widget_expanded -%} {%- block choice_widget_expanded -%}
@@ -145,6 +171,9 @@
'hx-swap': attr['hx-swap'] 'hx-swap': attr['hx-swap']
}) -%} }) -%}
{%- endif -%} {%- endif -%}
{%- if child.vars.attr['data-tooltip'] is defined -%}
{%- set child_attr = child_attr|merge({'data-tooltip': child.vars.attr['data-tooltip']}) -%}
{%- endif -%}
{{- form_row(child, { 'attr': child_attr }) -}} {{- form_row(child, { 'attr': child_attr }) -}}
{% endfor -%} {% endfor -%}
{%- endblock choice_widget_expanded -%} {%- endblock choice_widget_expanded -%}