feat: display service descriptions as tooltip with info icon

addresses #869axbnj0

src/Form/Service/ParticipantFieldOptionsProvider.php

@@ -222,6 +222,11 @@ class ParticipantFieldOptionsProvider extends AbstractFieldOptionsProvider
 
                 $attributes = [];
 
+                // Add service description as data attribute for frontend use
+                if (null !== $service->description && '' !== trim($service->description)) {
+                    $attributes['data-description'] = $service->description;
+                }
+
                 // Make readonly if service is unavailable (intelligently handles edit mode)
                 if ($this->shouldMakeServiceReadonly($service, $bookingDto, $participantIndex, 'board')) {
                     $attributes['readonly'] = true;
@@ -366,6 +371,11 @@ class ParticipantFieldOptionsProvider extends AbstractFieldOptionsProvider
 
                 $attributes = [];
 
+                // Add service description as data attribute for frontend use
+                if (null !== $service->description && '' !== trim($service->description)) {
+                    $attributes['data-description'] = $service->description;
+                }
+
                 // Make readonly if service is unavailable (intelligently handles edit mode)
                 if ($this->shouldMakeServiceReadonly($service, $bookingDto, $participantIndex, 'transportationOutbound')) {
                     $attributes['readonly'] = true;
@@ -392,6 +402,11 @@ class ParticipantFieldOptionsProvider extends AbstractFieldOptionsProvider
 
                 $attributes = [];
 
+                // Add service description as data attribute for frontend use
+                if (null !== $service->description && '' !== trim($service->description)) {
+                    $attributes['data-description'] = $service->description;
+                }
+
                 // Make readonly if service is unavailable (intelligently handles edit mode)
                 if ($this->shouldMakeServiceReadonly($service, $bookingDto, $participantIndex, 'transportationInbound')) {
                     $attributes['readonly'] = true;

templates/forms.html.twig

@@ -174,7 +174,28 @@
         {%- 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 gap-2">
+                {{- form_row(child, { 'attr': child_attr }) -}}
+                <div class="flex flex-col justify-center" {{ 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 -%}