Update header tooltips, add base tooltip styling

janfaracik · Mar 15, 2022 · 133c486 · 133c486
1 parent 7e43dfa
commit 133c486
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly
@@ -39,7 +39,7 @@ THE SOFTWARE.
                    class="am-button"
                    href="#"
                    data-href="${rootURL}/administrativeMonitorsApi/nonSecurityPopupContent"
-                   title="${%tooltip(activeNonSecurityAMCount)}">
+                   tooltip="${%tooltip(activeNonSecurityAMCount)}">
                     <l:svgIcon
                             href="${resURL}/images/material-icons/svg-sprite-social-symbol.svg#ic_notifications_24px"/>
                     <div class="am-monitor__indicator-mobile"/>
@@ -57,7 +57,7 @@ THE SOFTWARE.
                    class="am-button security-am"
                    href="#"
                    data-href="${rootURL}/administrativeMonitorsApi/securityPopupContent"
-                   title="${%tooltipSec(activeSecurityAMCount)}">
+                   tooltip="${%tooltipSec(activeSecurityAMCount)}">
                     <l:svgIcon
                             href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_warning_shield_24px"/>
                     <div class="am-monitor__indicator-mobile"/>

diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
@@ -1,5 +1,12 @@
 import tippy from "tippy.js"
 
+const TOOLTIP_BASE = {
+  arrow: false,
+  theme: "tooltip",
+  animation: "tooltip",
+  appendTo: document.body
+}
+
 registerTooltips()
 
 /**
@@ -15,19 +22,13 @@ function registerTooltips() {
 
   tippy("[tooltip]", {
     content: element => element.getAttribute("tooltip"),
-    arrow: false,
-    theme: "tooltip",
-    animation: "tooltip",
-    appendTo: document.body,
+    ...TOOLTIP_BASE
   })
 
   tippy("[html-tooltip]", {
     content: element => element.getAttribute("html-tooltip"),
     allowHTML: true,
-    arrow: false,
-    theme: "tooltip",
-    animation: "tooltip",
-    appendTo: document.body,
+    ...TOOLTIP_BASE
   })
 }
 
@@ -40,12 +41,9 @@ function hoverNotification(text, element) {
   const tooltip = tippy(element, {
     interactive: true,
     trigger: "hover",
-    arrow: false,
-    theme: "tooltip",
     offset: [0, 0],
-    animation: "tooltip",
     content: text,
-    appendTo: document.body,
+    ...TOOLTIP_BASE,
     onShow(instance) {
       setTimeout(() => {
         instance.hide()