src/servala/core/forms.py

@@ -5,14 +5,25 @@ from django_jsonform.widgets import JSONFormWidget
 from servala.core.models import ControlPlane, ServiceDefinition
 
 CONTROL_PLANE_USER_INFO_SCHEMA = {
+    "type": "array",
+    "items": {
         "type": "object",
         "properties": {
-        "CNAME Record": {
-            "title": "CNAME Record",
+            "title": {
                 "type": "string",
+                "title": "Title",
+            },
+            "content": {
+                "type": "string",
+                "title": "Content",
+            },
+            "help_text": {
+                "type": "string",
+                "title": "Help Text (optional)",
             },
         },
-    "additionalProperties": {"type": "string"},
+        "required": ["title", "content"],
+    },
 }
 
 

src/servala/core/models/service.py

@@ -156,7 +156,8 @@ class ControlPlane(ServalaModelMixin, models.Model):
         blank=True,
         verbose_name=_("User Information"),
         help_text=_(
-            "Key-value information displayed to users when selecting this control plane"
+            'Array of info objects: [{"title": "…", "content": "…", "help_text": "…"}]. '
+            "The help_text field is optional and will be shown as a hover popover on an info icon."
         ),
     )
     wildcard_dns = models.CharField(

src/servala/frontend/templates/frontend/organizations/service_instance_detail.html

@@ -248,3 +248,12 @@
         </div>
     </div>
 {% endblock content %}
+{% block extra_js %}
+    <script>
+        // Initialize Bootstrap popovers for help text
+        document.addEventListener('DOMContentLoaded', function() {
+            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
+            [...popoverTriggerList].map(el => new bootstrap.Popover(el));
+        });
+    </script>
+{% endblock extra_js %}

src/servala/frontend/templates/frontend/organizations/service_offering_detail.html

@@ -108,4 +108,19 @@
         </script>
         <script defer src="{% static "js/fqdn.js" %}"></script>
     {% endif %}
+    <script>
+        // Initialize Bootstrap popovers for help text
+        document.addEventListener('DOMContentLoaded', function() {
+            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
+            [...popoverTriggerList].map(el => new bootstrap.Popover(el));
+        });
+
+        // Re-initialize popovers after HTMX swaps
+        document.body.addEventListener('htmx:afterSwap', function(event) {
+            if (event.detail.target.id === 'control-plane-info') {
+                const popoverTriggerList = event.detail.target.querySelectorAll('[data-bs-toggle="popover"]');
+                [...popoverTriggerList].map(el => new bootstrap.Popover(el));
+            }
+        });
+    </script>
 {% endblock extra_js %}

src/servala/frontend/templates/includes/control_plane_user_info.html

@@ -3,10 +3,20 @@
     <div class="table-responsive">
         <table class="table mb-0 table-lg">
             <tbody>
-                {% for key, value in control_plane.user_info.items %}
+                {% for info in control_plane.user_info %}
                     <tr>
-                        <th>{{ key }}</th>
-                        <td>{{ value }}</td>
+                        <th>
+                            {{ info.title }}
+                            {% if info.help_text %}
+                                <i class="bi bi-info-circle ms-1"
+                                   data-bs-toggle="popover"
+                                   data-bs-trigger="hover focus"
+                                   data-bs-placement="top"
+                                   data-bs-content="{{ info.help_text }}"
+                                   style="cursor: help"></i>
+                            {% endif %}
+                        </th>
+                        <td>{{ info.content }}</td>
                     </tr>
                 {% endfor %}
             </tbody>