feat: display service descriptions as tooltip with info icon

addresses #869axbnj0

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 -%}