Replace YUI tooltips with Tippy.js

core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly

@@ -38,7 +38,9 @@ THE SOFTWARE.
     <td class="build-row-cell">
       <div class="pane build-name">
         <div class="build-icon">
-          <a class="build-status-link" href="${link}console"><l:icon alt="${build.iconColor.description} &gt; ${%Console Output}" class="${build.buildStatusIconClassName} icon-sm" tooltip="${build.iconColor.description} &gt; ${%Console Output}"/></a>
+          <a class="build-status-link" href="${link}console" tooltip="${build.iconColor.description} > ${%Console Output}">
+            <l:icon class="${build.buildStatusIconClassName} icon-sm" />
+          </a>
         </div>
         <a class="model-link inside build-link display-name" update-parent-class=".build-row" href="${link}">${build.displayName}</a>
       </div>

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"/>

core/src/main/resources/lib/hudson/buildHealth.jelly

@@ -36,8 +36,36 @@ THE SOFTWARE.
     <j:set var="buildHealth" value="${empty(healthReports) ? emptyHealthReport : healthReports[0]}"/>
     <j:if test="${td}"><j:set var="useTdElement" value="x"/></j:if>
     <x:element name="${useTdElement!=null?'td':'div'}">
-        <x:attribute name="data">${buildHealth.score}</x:attribute>
-        <x:attribute name="class">jenkins-table__cell--tight jenkins-table__icon healthReport</x:attribute>
+      <x:attribute name="data">${buildHealth.score}</x:attribute>
+      <x:attribute name="class">jenkins-table__cell--tight jenkins-table__icon</x:attribute>
+      <j:if test="${!empty(healthReports)}">
+        <x:attribute name="html-tooltip">
+          <div class="jenkins-tooltip--table-wrapper">
+            <table class="jenkins-table">
+              <thead>
+                <tr>
+                  <th align="left">W</th>
+                  <th align="left">${%Description}</th>
+                  <th align="right">%</th>
+                </tr>
+              </thead>
+              <tbody>
+                <j:forEach var="rpt" items="${healthReports}">
+                  <tr>
+                    <td align="left" class="jenkins-table__cell--tight jenkins-table__icon">
+                      <div class="jenkins-table__cell__button-wrapper">
+                        <l:icon class="${rpt.iconClassName} icon-sm" />
+                      </div>
+                    </td>
+                    <td>${rpt.localizableDescription}</td>
+                    <td align="right">${rpt.score}</td>
+                  </tr>
+                </j:forEach>
+              </tbody>
+            </table>
+          </div>
+        </x:attribute>
+      </j:if>
         <j:if test="${buildHealth!=null}">
             <div class="jenkins-table__cell__button-wrapper">
                 <j:if test="${iconSizeClass == null}">
@@ -62,29 +90,5 @@ THE SOFTWARE.
                 </j:choose>
             </div>
         </j:if>
-        <j:if test="${!empty(healthReports)}">
-            <div class="jenkins-tooltip healthReportDetails">
-                <table class="jenkins-table">
-                    <thead>
-                        <tr>
-                            <th align="left">W</th>
-                            <th align="left">${%Description}</th>
-                            <th align="right">%</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <j:forEach var="rpt" items="${healthReports}">
-                            <tr>
-                                <td align="left">
-                                    <l:icon class="${rpt.iconClassName} icon-sm" />
-                                </td>
-                                <td align="left">${rpt.localizableDescription}</td>
-                                <td align="right">${rpt.score}</td>
-                            </tr>
-                        </j:forEach>
-                    </tbody>
-                </table>
-            </div>
-        </j:if>
     </x:element>
 </j:jelly>

core/src/main/resources/lib/layout/layout.jelly

@@ -253,6 +253,8 @@ THE SOFTWARE.
     </footer>
     </j:if>
 
+    <script src="${resURL}/jsbundles/tooltips.js" type="text/javascript" />
+
     <!-- SVG sprite polyfill for IE 11.
          Loaded at the end in order to not make modern browsers wait for it. This causes a flash-of-no-icons on IE 11  -->
     <script src="${resURL}/scripts/svgxuse.min.js" type="text/javascript" async="true" />

core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js

@@ -28,6 +28,7 @@ function progressivelyRender(handler, callback, statusId) {
         if (r.status == 'done') {
             callback(r.data);
             $(statusId).style.display = 'none';
+            registerTooltips();
         } else if (r.status == 'canceled') {
             // TODO ugly; replace with single tr of class=unknown?
             $$('#' + statusId + ' .progress-bar-done')[0].innerHTML = 'Aborted.';
@@ -40,6 +41,7 @@ function progressivelyRender(handler, callback, statusId) {
             $$('#' + statusId + ' .progress-bar-done')[0].style.width = (100 * r.status) + '%';
             $$('#' + statusId + ' .progress-bar-left')[0].style.width = (100 - 100 * r.status) + '%';
             checkNewsLater(500);
+            registerTooltips();
         }
     }
     function checkNewsLater(timeout) {

war/package.json

@@ -58,6 +58,7 @@
     "lodash": "^4.17.20",
     "raf": "^3.4.1",
     "sortablejs": "^1.13.0",
+    "tippy.js": "^6.3.7",
     "window-handle": "^1.0.0"
   },
   "browserslist": [

war/src/main/js/tooltips.js

@@ -0,0 +1,75 @@
+import tippy from "tippy.js"
+
+const TOOLTIP_BASE = {
+  arrow: false,
+  theme: "tooltip",
+  animation: "tooltip",
+  appendTo: document.body
+}
+
+let tooltipInstances = []
+const globalPlugin = {
+  fn() {
+    return {
+      onCreate(instance) {
+        tooltipInstances = tooltipInstances.concat(instance);
+      },
+      onDestroy(instance) {
+        tooltipInstances = tooltipInstances.filter(i => i !== instance);
+      }
+    }
+  }
+}
+
+tippy.setDefaultProps({
+  plugins: [globalPlugin]
+})
+
+registerTooltips()
+
+/**
+ * Registers tooltips for the page
+ * If called again, destroys existing tooltips and registers them again (useful for progressive rendering)
+ */
+function registerTooltips() {
+  tooltipInstances.forEach(instance => {
+    instance.destroy()
+  })
+
+  tippy("[tooltip]:not([tooltip=\"\"])", {
+    content: element => element.getAttribute("tooltip")
+      .replace("<br>", "\n")
+      .replace("<br/>", "\n"),
+    ...TOOLTIP_BASE
+  })
+
+  tippy("[html-tooltip]", {
+    content: element => element.getAttribute("html-tooltip"),
+    allowHTML: true,
+    ...TOOLTIP_BASE
+  })
+}
+
+/**
+ * Displays a tooltip for three seconds on the provided element after interaction
+ * @param {string} text - The tooltip text
+ * @param {HTMLElement} element - The element to show the tooltip
+ */
+function hoverNotification(text, element) {
+  const tooltip = tippy(element, {
+    interactive: true,
+    trigger: "hover",
+    offset: [0, 0],
+    content: text,
+    ...TOOLTIP_BASE,
+    onShow(instance) {
+      setTimeout(() => {
+        instance.hide()
+      }, 3000)
+    },
+  })
+  tooltip.show()
+}
+
+window.registerTooltips = registerTooltips
+window.hoverNotification = hoverNotification

war/src/main/less/abstracts/theme.less

@@ -201,9 +201,9 @@
   --link-font-weight: 600;
 
   // Tooltips
-  --tooltip-background-color: var(--background);
-  --tooltip-foreground-color: var(--text-color);
-  --tooltip-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.2);
+  --tooltip-background: rgba(white, 0.55);
+  --tooltip-color: var(--text-color);
+  --tooltip-box-shadow: 0 0 8px 2px rgba(0, 0, 30, 0.05), 0 0 1px 1px rgba(0, 0, 20, 0.025), 0 10px 20px rgba(0, 0, 20, 0.15);
 
   // Dark link
   --link-dark-color: var(--text-color);

war/src/main/less/base/layout-commons.less

@@ -1,7 +1,6 @@
 @import '../abstracts/theme.less';
 
 html {
-  position: relative;
   height: 100%;
   box-sizing: border-box;
 }

war/src/main/less/modules/table.less

@@ -45,6 +45,12 @@
           color: var(--table-header-foreground);
           font-weight: 700;
         }
+
+        svg {
+          vertical-align: middle;
+          width: 0.8rem;
+          height: 0.8rem;
+        }
       }
     }
   }

war/src/main/less/modules/tooltips.less

@@ -1,12 +1,46 @@
-.jenkins-tooltip {
-  position: absolute;
-  padding: 5px 10px;
+.tippy-box[data-theme~='tooltip'] {
+  background: var(--tooltip-background);
+  color: var(--tooltip-color);
+  padding: 0.55rem 0.8rem;
   border-radius: 10px;
-  background: var(--tooltip-background-color);
-  box-shadow: var(--tooltip-shadow);
-  color: var(--tooltip-foreground-color);
-  font-size: 0.8rem;
-  z-index: 1001 !important;
-  overflow: hidden;
-  max-width: none !important;
+  box-shadow: var(--tooltip-box-shadow);
+  font-weight: 500;
+  font-size: 0.75rem;
+  backdrop-filter: saturate(2) blur(15px);
+  max-width: unset !important;
+  white-space: pre-line;
+
+  .tippy-content {
+    padding: 0;
+  }
+
+  // We style tables as they have additional margin/border radius when in tooltips
+  .jenkins-tooltip--table-wrapper {
+    background-color: rgba(black, 0.05);
+    margin: -0.55rem -0.8rem;
+    border-radius: 10px;
+  }
+
+  .jenkins-table {
+    --table-background: transparent;
+    --table-border-radius: 8px;
+
+    margin: 0;
+    width: 450px;
+  }
+}
+
+.tippy-box[data-animation='tooltip'][data-state='hidden'] {
+  opacity: 0;
+  transform: scale(0.995);
+
+  &[data-placement^="top"] {
+    transform-origin: bottom;
+    transform: translateY(2px) scale(0.995);
+  }
+
+  &[data-placement^="bottom"] {
+    transform-origin: top;
+    transform: translateY(-2px) scale(0.995);
+  }
 }