EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: price info tooltip for bulk insurance booking

Browse Source 
addresses #869axbjzz
This commit is contained in:
Björn Fromme
2026-03-16 11:59:11 +01:00
parent 608f5ed3e9
commit 91d9e82d84
2 changed files with 49 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/forms.html.twig
+46 -23
View File
@@ -1,5 +1,21 @@
{% use 'form_div_layout.html.twig' %}
{# Macro to render info icon tooltip for descriptions #}
{% macro info_tooltip(description) %}
<div class="pt-px pl-1" {{ stimulus_controller('tooltip') }}>
<button type="button" data-tooltip-target="trigger" class="text-blue-600 hover:text-blue-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
</svg>
</button>
<template data-tooltip-target="template">
<div class="text-sm">
{{ description|raw }}
</div>
</template>
</div>
{% endmacro %}
{%- block form_row -%}
{%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-1')|trim }) -%}
{%- set widget_attr = {} -%}
@@ -120,11 +136,13 @@
{%- endblock radio_widget -%}
{% block checkbox_row %}
{%- import _self as forms -%}
{%- set tooltip = null -%}
{%- if form.vars.attr['data-tooltip'] is defined -%}
{%- set tooltip = form.vars.attr['data-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 %}>
{%- set description = form.vars.attr['data-description'] ?? null -%}
<div class="{{ html_classes('flex', { '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 }) }}">
<div class="flex h-6 items-center">
{{ form_widget(form) }}
@@ -134,6 +152,32 @@
{{- form_errors(form) -}}
</div>
</label>
{%- if description is not null -%}
{{ forms.info_tooltip(description) }}
{%- endif -%}
</div>
{% endblock %}
{% block radio_row %}
{%- import _self as forms -%}
{%- set tooltip = null -%}
{%- if form.vars.attr['data-tooltip'] is defined -%}
{%- set tooltip = form.vars.attr['data-tooltip'] -%}
{%- endif -%}
{%- set description = form.vars.attr['data-description'] ?? null -%}
<div class="{{ html_classes('flex', { '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 }) }}">
<div class="flex h-6 items-center">
{{ form_widget(form) }}
</div>
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
{{ form.vars.label | raw }}
{{- form_errors(form) -}}
</div>
</label>
{%- if description is not null -%}
{{ forms.info_tooltip(description) }}
{%- endif -%}
</div>
{% endblock %}
@@ -174,28 +218,7 @@
{%- if child.vars.attr['data-tooltip'] is defined -%}
{%- set child_attr = child_attr|merge({'data-tooltip': child.vars.attr['data-tooltip']}) -%}
{%- endif -%}
{%- set description = child.vars.attr['data-description'] ?? null -%}
{%- if description is not null -%}
<div class="flex">
{{- form_row(child, { 'attr': child_attr }) -}}
<div class="pt-px pl-1" {{ stimulus_controller('tooltip') }}>
<button type="button" data-tooltip-target="trigger" class="text-blue-600 hover:text-blue-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
</svg>
</button>
<template data-tooltip-target="template">
<div class="text-sm">
{{ description|raw }}
</div>
</template>
</div>
</div>
{%- else -%}
{{- form_row(child, { 'attr': child_attr }) -}}
{%- endif -%}
{{- form_row(child, { 'attr': child_attr }) -}}
{% endfor -%}
{%- endblock choice_widget_expanded -%}