feat: price info tooltip for bulk insurance booking

addresses #869axbjzz

src/Form/Service/ParticipantFieldOptionsProvider.php

@@ -442,6 +442,9 @@ class ParticipantFieldOptionsProvider extends AbstractFieldOptionsProvider
         $this->fieldOptionProviders['bulkInsuranceBooking'] = fn (BookingDto $bookingDto, int $participantIndex, array $options = []) => [
             'label' => 'Für alle Teilnehmer buchen',
             'required' => false,
+            'attr' => [
+                'data-description' => 'Der hier angezeigte Preis gilt nur für den/die Anmelder:in. Die Preise für die anderen Teilnehmer:innen werden automatisch aktualisiert.',
+            ],
         ];
 
         // Insurance field provider - provides age and eligibility filtered insurances for participants

templates/forms.html.twig

@@ -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 -%}
-
+        {{- form_row(child, { 'attr': child_attr }) -}}
-        {%- 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 -%}
     {% endfor -%}
 {%- endblock choice_widget_expanded -%}