Add a severity level tooltip

Author: szabozoltan69

api/admin.py

@@ -310,7 +310,18 @@ def get_form(self, request, obj=None, change=False, **kwargs):
             return form
 
         url, title = self._crisis_categorisation_link_data(obj)
-        field.label = mark_safe(f'<a href="{url}" title="{title}">IFRC Severity level</a>')
+        field.label = mark_safe(
+            f'<a href="{url}" title="{title}">IFRC Severity level</a>'
+            ' <span class="help-icon cc-help-icon ifrc-severity-help-icon" '
+            'title="Click for more information" '
+            'aria-label="IFRC Severity level help">ⓘ</span>'
+            ' <div class="help-tooltip cc-help-tooltip ifrc-severity-help-tooltip" role="tooltip">'
+            "Link to the crisis categorisation page belonging to this event.<br>"
+            "If this is a multi-country event, you may want to select the country yourself from the "
+            '<a target="_blank" href="/admin/api/crisiscategorisationbycountry/">list</a> or'
+            ' add a new record <a target="_blank" href="/admin/api/crisiscategorisationbycountry/add/">here</a>.<br>'
+            "</div>"
+        )
         return form
 
     severity_level_link.short_description = "Crisis Categorisation"
@@ -494,6 +505,9 @@ def changelist_view(self, request, extra_context=None):
 
         return response
 
+    class Media:
+        js = ("js/event_severity_help.js",)
+
 
 class GdacsAdmin(CompareVersionAdmin, RegionRestrictedAdmin, TranslationAdmin):
     country_in = "countries__pk__in"

go-static/css/after.css

@@ -233,6 +233,11 @@ p.deletelink-box {
     top: -0.3rem;
 }
 
+.ifrc-severity-help-icon {
+    background: transparent;
+    color: #0b6aa2;
+}
+
 /* Tooltip bubble */
 .precrisis-help-tooltip,
 .cc-help-tooltip {
@@ -254,6 +259,12 @@ p.deletelink-box {
     margin-top: 0;
 }
 
+.ifrc-severity-help-tooltip {
+    top: calc(100% + 2px);
+    bottom: auto;
+    font-weight: normal;
+}
+
 .precrisis-help-tooltip img,
 .cc-help-tooltip img {
     display: block;
@@ -274,6 +285,13 @@ p.deletelink-box {
     border-top: 5px solid #ccc;
 }
 
+.ifrc-severity-help-tooltip::before {
+    top: -5px;
+    bottom: auto;
+    border-top: none;
+    border-bottom: 5px solid #ccc;
+}
+
 .precrisis-help-tooltip.visible,
 .cc-help-tooltip.visible {
     display: block;
@@ -292,4 +310,13 @@ p.deletelink-box {
     .cc-help-tooltip::before {
         border-top-color: #1a1a1a;
     }
+
+    .ifrc-severity-help-icon {
+        background: transparent;
+        color: #4ea3d8;
+    }
+
+    .ifrc-severity-help-tooltip::before {
+        border-bottom-color: #1a1a1a;
+    }
 }

go-static/js/event_severity_help.js

@@ -0,0 +1,39 @@
+(function() {
+    function initSeverityHelpTooltip() {
+        const label = document.querySelector('label[for="id_ifrc_severity_level"]');
+        if (!label) {
+            return;
+        }
+
+        const helpIcon = label.querySelector('.ifrc-severity-help-icon');
+        const tooltip = label.querySelector('.ifrc-severity-help-tooltip');
+        if (!helpIcon || !tooltip) {
+            return;
+        }
+
+        label.style.position = 'relative';
+
+        helpIcon.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const shouldShow = !tooltip.classList.contains('visible');
+            document.querySelectorAll('.cc-help-tooltip.visible').forEach(function(openTooltip) {
+                openTooltip.classList.remove('visible');
+            });
+            tooltip.classList.toggle('visible', shouldShow);
+        });
+
+        document.addEventListener('click', function(e) {
+            if (!label.contains(e.target)) {
+                tooltip.classList.remove('visible');
+            }
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSeverityHelpTooltip);
+    } else {
+        initSeverityHelpTooltip();
+    }
+})();