From 0ff896bf573a91f587f7ad3dce064fa7bcd16415 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:20:38 +0000
Subject: [PATCH 01/17] Add yarn deps

---
 war/package.json |  1 +
 war/yarn.lock    | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/war/package.json b/war/package.json
index 81b6f1aab656..fb82b87dd11f 100644
--- a/war/package.json
+++ b/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": [
diff --git a/war/yarn.lock b/war/yarn.lock
index a92c792b2133..d083782589cb 100644
--- a/war/yarn.lock
+++ b/war/yarn.lock
@@ -1096,6 +1096,11 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.9.0":
+  version "2.11.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
+  integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
@@ -7899,6 +7904,13 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tippy.js@^6.3.7:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 tlds@^1.203.0:
   version "1.207.0"
   resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.207.0.tgz#459264e644cf63ddc0965fece3898913286b1afd"

From db1928d0fa6720d3becd37e83cfbd72fdc67ebf9 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:24:10 +0000
Subject: [PATCH 02/17] Add initial JS files

---
 .../main/resources/lib/layout/layout.jelly    |  2 +
 war/src/main/js/tooltips.js                   | 37 +++++++++++++++++++
 war/webpack.config.js                         |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 war/src/main/js/tooltips.js

diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
index d71d1145e7d5..39143619f224 100644
--- a/core/src/main/resources/lib/layout/layout.jelly
+++ b/core/src/main/resources/lib/layout/layout.jelly
@@ -255,6 +255,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" />
diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
new file mode 100644
index 000000000000..17e4e40ab1c9
--- /dev/null
+++ b/war/src/main/js/tooltips.js
@@ -0,0 +1,37 @@
+import tippy from "tippy.js"
+
+tippy("[tooltip]", {
+  content: element => element.getAttribute("tooltip"),
+  arrow: false,
+  theme: "tooltip",
+  animation: "tooltip"
+})
+
+tippy("[html-tooltip]", {
+  content: element => element.getAttribute("html-tooltip"),
+  allowHTML: true,
+  arrow: false,
+  theme: "tooltip",
+  animation: "tooltip"
+})
+
+function hoverNotification(text, element) {
+  let tooltip = tippy(element, {
+    interactive: true,
+    trigger: "hover",
+    followCursor: "initial",
+    arrow: false,
+    theme: "tooltip",
+    offset: [0, 0],
+    animation: "tooltip",
+    content: text,
+    onShow(instance) {
+      setTimeout(() => {
+        instance.hide()
+      }, 3000)
+    },
+  })
+  tooltip.show()
+}
+
+window.hoverNotification = hoverNotification
diff --git a/war/webpack.config.js b/war/webpack.config.js
index 32406805416e..d03c3093e9ca 100644
--- a/war/webpack.config.js
+++ b/war/webpack.config.js
@@ -29,6 +29,7 @@ module.exports = (env, argv) => ({
       path.join(__dirname, "src/main/js/config-tabbar.js"),
       path.join(__dirname, "src/main/js/config-tabbar.less"),
     ],
+    "tooltips": [path.join(__dirname, "src/main/js/tooltips.js")],
     "sortable-drag-drop": [path.join(__dirname, "src/main/js/sortable-drag-drop.js")],
     "section-to-tabs": [path.join(__dirname, "src/main/js/section-to-tabs.js")],
     "filter-build-history": [path.join(__dirname, "src/main/js/filter-build-history.js")],

From 09e9109d25b85c1ff566a0da7daf61f61f5c02f2 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:33:13 +0000
Subject: [PATCH 03/17] WB

---
 .../resources/lib/hudson/buildHealth.jelly    | 54 ++++++++++---------
 war/src/main/less/base/layout-commons.less    |  4 +-
 war/src/main/less/modules/tooltips.less       | 44 +++++++++++----
 war/src/main/webapp/scripts/prototype.js      |  4 +-
 4 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
index 10f138f701bb..161a74031565 100644
--- a/core/src/main/resources/lib/hudson/buildHealth.jelly
+++ b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -36,8 +36,34 @@ 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>
+      <x:attribute name="html-tooltip">
+        <j:if test="${!empty(healthReports)}">
+          <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>
+        </j:if>
+      </x:attribute>
         <j:if test="${buildHealth!=null}">
             <div class="jenkins-table__cell__button-wrapper">
                 <j:if test="${iconSizeClass == null}">
@@ -62,29 +88,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>
diff --git a/war/src/main/less/base/layout-commons.less b/war/src/main/less/base/layout-commons.less
index 6c70661734e4..735550feca14 100644
--- a/war/src/main/less/base/layout-commons.less
+++ b/war/src/main/less/base/layout-commons.less
@@ -1,14 +1,12 @@
 @import '../abstracts/theme.less';
 
 html {
-  position: relative;
   height: 100%;
   box-sizing: border-box;
-  min-height: none;
 }
 
 body {
-  height: 100%;
+  min-height: 100vh;
   margin: 0;
   display: flex;
   flex-direction: column;
diff --git a/war/src/main/less/modules/tooltips.less b/war/src/main/less/modules/tooltips.less
index 86b8bd25d70c..0480817e370e 100644
--- a/war/src/main/less/modules/tooltips.less
+++ b/war/src/main/less/modules/tooltips.less
@@ -1,12 +1,38 @@
-.jenkins-tooltip {
-  position: absolute;
-  padding: 5px 10px;
+.tippy-box[data-theme~='tooltip'] {
+  background: var(--tooltip-background);
+  color: var(--tooltip-foreground);
+  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;
+  font-weight: 500;
+  font-size: 0.75rem;
+  backdrop-filter: saturate(2) blur(10px);
+  max-width: unset !important;
+
+  .tippy-content {
+    padding: 0;
+  }
+
+  // We style tables as they have additional margin/border radius when in tooltips
+  .jenkins-table {
+    --table-background: rgba(black, 0.05);
+    --table-border-radius: 8px;
+    margin: calc(-0.55rem + 5px) calc(-0.8rem + 5px);
+    width: 400px;
+  }
+}
+
+.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);
+  }
 }
diff --git a/war/src/main/webapp/scripts/prototype.js b/war/src/main/webapp/scripts/prototype.js
index 90bf7b042711..19e30c0a0f47 100644
--- a/war/src/main/webapp/scripts/prototype.js
+++ b/war/src/main/webapp/scripts/prototype.js
@@ -853,7 +853,9 @@ var Enumerable = (function() {
         iterator.call(context, value, index++);
       });
     } catch (e) {
-      if (e != $break) throw e;
+      // This breaks Tippy for some reason?
+      // TypeError: undefined is not an object (evaluating 'self.indexOf')
+      // if (e != $break) throw e;
     }
     return this;
   }

From 491b1f1fecaf4cc099029d6253cc6fc548bfe193 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:36:07 +0000
Subject: [PATCH 04/17] Update hudson-behavior.js

---
 .../main/webapp/scripts/hudson-behavior.js    | 77 -------------------
 1 file changed, 77 deletions(-)

diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
index 77942f2c5d4c..d5c181e129bb 100644
--- a/war/src/main/webapp/scripts/hudson-behavior.js
+++ b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -492,11 +492,6 @@ function fireEvent(element,event){
     }
 }
 
-// shared tooltip object
-var tooltip;
-
-
-
 // Behavior rules
 //========================================================
 // using tag names in CSS selector makes the processing faster
@@ -964,10 +959,6 @@ function rowvgStartEachRow(recursive,f) {
 
 (function () {
     var p = 20;
-    Behaviour.specify("BODY", "body", ++p, function() {
-        tooltip = new YAHOO.widget.Tooltip("tt", {context:[], zindex:999});
-    });
-
     Behaviour.specify("TABLE.sortable", "table-sortable", ++p, function(e) {// sortable table
         e.sortable = new Sortable.Sortable(e);
     });
@@ -1213,12 +1204,6 @@ function rowvgStartEachRow(recursive,f) {
         form = null; // memory leak prevention
     });
 
-    // hook up tooltip.
-    //   add nodismiss="" if you'd like to display the tooltip forever as long as the mouse is on the element.
-    Behaviour.specify("[tooltip]", "-tooltip-", ++p, function(e) {
-        applyTooltip(e,e.getAttribute("tooltip"));
-    });
-
     Behaviour.specify("INPUT.submit-button", "input-submit-button", ++p, function(e) {
         makeButton(e);
     });
@@ -1530,20 +1515,6 @@ var hudsonRules = {}; // legacy name
 // now empty, but plugins can stuff things in here later:
 Behaviour.register(hudsonRules);
 
-function applyTooltip(e,text) {
-        // copied from YAHOO.widget.Tooltip.prototype.configContext to efficiently add a new element
-        // event registration via YAHOO.util.Event.addListener leaks memory, so do it by ourselves here
-        e.onmouseover = function(ev) {
-            var delay = this.getAttribute("nodismiss")!=null ? 99999999 : 5000;
-            tooltip.cfg.setProperty("autodismissdelay",delay);
-            return tooltip.onContextMouseOver.call(this,YAHOO.util.Event.getEvent(ev),tooltip);
-        }
-        e.onmousemove = function(ev) { return tooltip.onContextMouseMove.call(this,YAHOO.util.Event.getEvent(ev),tooltip); }
-        e.onmouseout  = function(ev) { return tooltip.onContextMouseOut .call(this,YAHOO.util.Event.getEvent(ev),tooltip); }
-        e.title = text;
-        e = null; // avoid memory leak
-}
-
 var Path = {
   tail : function(p) {
       var idx = p.lastIndexOf("/");
@@ -2292,54 +2263,6 @@ var toggleCheckboxes = function(toggle) {
     }
 };
 
-var hoverNotification = (function() {
-    var msgBox;
-    var body;
-
-    // animation effect that automatically hide the message box
-    var effect = function(overlay, dur) {
-        var o = YAHOO.widget.ContainerEffect.FADE(overlay, dur);
-        o.animateInCompleteEvent.subscribe(function() {
-            window.setTimeout(function() {
-                msgBox.hide()
-            }, 1500);
-        });
-        return o;
-    }
-
-    function init() {
-        if(msgBox!=null)  return;   // already initialized
-
-        var div = document.createElement("DIV");
-        document.body.appendChild(div);
-        div.innerHTML = "<div id=hoverNotification class='jenkins-tooltip'><div class=bd></div></div>";
-        body = $('hoverNotification');
-
-        msgBox = new YAHOO.widget.Overlay(body, {
-          visible:false,
-          zIndex:1000,
-          effect:{
-            effect:effect,
-            duration:0.25
-          }
-        });
-        msgBox.render();
-    }
-
-    return function(title, anchor, offset) {
-        if (typeof offset === 'undefined') {
-            offset = 48;
-        }
-        init();
-        body.innerHTML = title;
-        var xy = YAHOO.util.Dom.getXY(anchor);
-        xy[0] += offset;
-        xy[1] += anchor.offsetHeight;
-        msgBox.cfg.setProperty("xy",xy);
-        msgBox.show();
-    };
-})();
-
 // Decrease vertical padding for checkboxes
 window.addEventListener('load', function () {
     document.querySelectorAll(".jenkins-form-item").forEach(function (element) {

From 1fbcc55264992c6872623554d827744f2e7eada4 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:38:20 +0000
Subject: [PATCH 05/17] Update tooltips.less

---
 war/src/main/less/modules/tooltips.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/war/src/main/less/modules/tooltips.less b/war/src/main/less/modules/tooltips.less
index 0480817e370e..3d190c4ca7a4 100644
--- a/war/src/main/less/modules/tooltips.less
+++ b/war/src/main/less/modules/tooltips.less
@@ -6,7 +6,7 @@
   box-shadow: var(--tooltip-shadow);
   font-weight: 500;
   font-size: 0.75rem;
-  backdrop-filter: saturate(2) blur(10px);
+  backdrop-filter: saturate(2) blur(15px);
   max-width: unset !important;
 
   .tippy-content {
@@ -17,7 +17,8 @@
   .jenkins-table {
     --table-background: rgba(black, 0.05);
     --table-border-radius: 8px;
-    margin: calc(-0.55rem + 5px) calc(-0.8rem + 5px);
+
+    margin: -0.55rem -0.8rem;
     width: 400px;
   }
 }

From 940d51af70026e1f12751d8baea7aacb1adf0f0a Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:47:18 +0000
Subject: [PATCH 06/17] WB

---
 .../hudson/widgets/HistoryWidget/entry.jelly        |  4 +++-
 war/src/main/js/tooltips.js                         | 13 ++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
index b690e2084ccc..adb16ef4f62e 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
+++ b/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="tip model-link inside build-link display-name" update-parent-class=".build-row" href="${link}">${build.displayName}</a>
       </div>
diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
index 17e4e40ab1c9..b3ba599ab9b8 100644
--- a/war/src/main/js/tooltips.js
+++ b/war/src/main/js/tooltips.js
@@ -4,7 +4,8 @@ tippy("[tooltip]", {
   content: element => element.getAttribute("tooltip"),
   arrow: false,
   theme: "tooltip",
-  animation: "tooltip"
+  animation: "tooltip",
+  appendTo: document.body,
 })
 
 tippy("[html-tooltip]", {
@@ -12,19 +13,25 @@ tippy("[html-tooltip]", {
   allowHTML: true,
   arrow: false,
   theme: "tooltip",
-  animation: "tooltip"
+  animation: "tooltip",
+  appendTo: document.body,
 })
 
+/**
+ * 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) {
   let tooltip = tippy(element, {
     interactive: true,
     trigger: "hover",
-    followCursor: "initial",
     arrow: false,
     theme: "tooltip",
     offset: [0, 0],
     animation: "tooltip",
     content: text,
+    appendTo: document.body,
     onShow(instance) {
       setTimeout(() => {
         instance.hide()

From 7e6c576bb508bf6f5bf738ba17a6840ca733baaf Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 01:15:10 +0000
Subject: [PATCH 07/17] Fix tooltip showing when it shouldn't, improve
 appearance

---
 .../resources/lib/hudson/buildHealth.jelly    | 54 ++++++++++---------
 war/src/main/less/abstracts/theme.less        |  6 +--
 war/src/main/less/modules/tooltips.less       | 16 ++++--
 3 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
index 161a74031565..012dc98e0d37 100644
--- a/core/src/main/resources/lib/hudson/buildHealth.jelly
+++ b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -38,32 +38,34 @@ THE SOFTWARE.
     <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</x:attribute>
-      <x:attribute name="html-tooltip">
-        <j:if test="${!empty(healthReports)}">
-          <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>
-        </j:if>
-      </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}">
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
index c39643e22e95..707bb50ce531 100644
--- a/war/src/main/less/abstracts/theme.less
+++ b/war/src/main/less/abstracts/theme.less
@@ -200,9 +200,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);
diff --git a/war/src/main/less/modules/tooltips.less b/war/src/main/less/modules/tooltips.less
index 3d190c4ca7a4..e1f9bbf14954 100644
--- a/war/src/main/less/modules/tooltips.less
+++ b/war/src/main/less/modules/tooltips.less
@@ -1,9 +1,9 @@
 .tippy-box[data-theme~='tooltip'] {
   background: var(--tooltip-background);
-  color: var(--tooltip-foreground);
+  color: var(--tooltip-color);
   padding: 0.55rem 0.8rem;
   border-radius: 10px;
-  box-shadow: var(--tooltip-shadow);
+  box-shadow: var(--tooltip-box-shadow);
   font-weight: 500;
   font-size: 0.75rem;
   backdrop-filter: saturate(2) blur(15px);
@@ -14,12 +14,18 @@
   }
 
   // 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: rgba(black, 0.05);
+    --table-background: transparent;
     --table-border-radius: 8px;
 
-    margin: -0.55rem -0.8rem;
-    width: 400px;
+    margin: 0;
+    width: 450px;
   }
 }
 

From df6847a768a5baddec5055b4e0995d00c578f425 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 01:25:16 +0000
Subject: [PATCH 08/17] Now possible to reregister tooltips

---
 .../progressiveRendering.js                   |  2 +
 war/src/main/js/tooltips.js                   | 47 ++++++++++++-------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js b/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js
index 271f22ffdb6d..8e4a40f6cde1 100644
--- a/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js
+++ b/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) {
diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
index b3ba599ab9b8..f8432ae1dde5 100644
--- a/war/src/main/js/tooltips.js
+++ b/war/src/main/js/tooltips.js
@@ -1,21 +1,35 @@
 import tippy from "tippy.js"
 
-tippy("[tooltip]", {
-  content: element => element.getAttribute("tooltip"),
-  arrow: false,
-  theme: "tooltip",
-  animation: "tooltip",
-  appendTo: document.body,
-})
+registerTooltips()
 
-tippy("[html-tooltip]", {
-  content: element => element.getAttribute("html-tooltip"),
-  allowHTML: true,
-  arrow: false,
-  theme: "tooltip",
-  animation: "tooltip",
-  appendTo: document.body,
-})
+/**
+ * Registers tooltips for the page
+ * If called again, destroys existing tooltips and registers them again (useful for progressive rendering)
+ */
+function registerTooltips() {
+  [...document.querySelectorAll("*")].forEach(node => {
+    if (node._tippy) {
+      node._tippy.destroy()
+    }
+  })
+
+  tippy("[tooltip]", {
+    content: element => element.getAttribute("tooltip"),
+    arrow: false,
+    theme: "tooltip",
+    animation: "tooltip",
+    appendTo: document.body,
+  })
+
+  tippy("[html-tooltip]", {
+    content: element => element.getAttribute("html-tooltip"),
+    allowHTML: true,
+    arrow: false,
+    theme: "tooltip",
+    animation: "tooltip",
+    appendTo: document.body,
+  })
+}
 
 /**
  * Displays a tooltip for three seconds on the provided element after interaction
@@ -23,7 +37,7 @@ tippy("[html-tooltip]", {
  * @param {HTMLElement} element - The element to show the tooltip
  */
 function hoverNotification(text, element) {
-  let tooltip = tippy(element, {
+  const tooltip = tippy(element, {
     interactive: true,
     trigger: "hover",
     arrow: false,
@@ -41,4 +55,5 @@ function hoverNotification(text, element) {
   tooltip.show()
 }
 
+window.registerTooltips = registerTooltips
 window.hoverNotification = hoverNotification

From 7e43dfae11f26952da7e5be889d8c961b2a53620 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 01:27:16 +0000
Subject: [PATCH 09/17] Update buildHealth.jelly

---
 .../resources/lib/hudson/buildHealth.jelly    | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
index 012dc98e0d37..b1ce3b5f285c 100644
--- a/core/src/main/resources/lib/hudson/buildHealth.jelly
+++ b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -41,29 +41,29 @@ THE SOFTWARE.
       <j:if test="${!empty(healthReports)}">
         <x:attribute name="html-tooltip">
           <div class="jenkins-tooltip--table-wrapper">
-              <table class="jenkins-table">
-                <thead>
+            <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>
-                    <th align="left">W</th>
-                    <th align="left">${%Description}</th>
-                    <th align="right">%</th>
+                    <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>
-                </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>
+                </j:forEach>
+              </tbody>
+            </table>
+          </div>
         </x:attribute>
       </j:if>
         <j:if test="${buildHealth!=null}">

From 133c486f8c968743837d928ead7669ee2c23402e Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 09:51:35 +0000
Subject: [PATCH 10/17] Update header tooltips, add base tooltip styling

---
 .../footer.jelly                              |  4 ++--
 war/src/main/js/tooltips.js                   | 22 +++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly
index 826b10461be6..1f1597bec8c3 100644
--- 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
index f8432ae1dde5..843f888774b1 100644
--- 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()

From 7223890edc5b5b3f9d75163eac7934d6d725e304 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 15 Mar 2022 13:28:35 +0000
Subject: [PATCH 11/17] Add percentage symbol

---
 core/src/main/resources/lib/hudson/buildHealth.jelly | 4 +++-
 war/src/main/less/modules/table.less                 | 6 ++++++
 war/src/main/resources/images/symbols/percentage.svg | 8 ++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 war/src/main/resources/images/symbols/percentage.svg

diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
index b1ce3b5f285c..7a0147f8c2a3 100644
--- a/core/src/main/resources/lib/hudson/buildHealth.jelly
+++ b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -46,7 +46,9 @@ THE SOFTWARE.
                 <tr>
                   <th align="left">W</th>
                   <th align="left">${%Description}</th>
-                  <th align="right">%</th>
+                  <th align="right">
+                    <l:icon src="symbol-percentage" alt="${%Percentage}" />
+                  </th>
                 </tr>
               </thead>
               <tbody>
diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less
index 08b11a22a05e..aad0703565cf 100644
--- a/war/src/main/less/modules/table.less
+++ b/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;
+        }
       }
     }
   }
diff --git a/war/src/main/resources/images/symbols/percentage.svg b/war/src/main/resources/images/symbols/percentage.svg
new file mode 100644
index 000000000000..3c129fa4e3ce
--- /dev/null
+++ b/war/src/main/resources/images/symbols/percentage.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="290px" height="290px" viewBox="0 0 290 290" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle stroke="currentColor" stroke-width="32" cx="215" cy="215" r="34"></circle>
+        <circle stroke="currentColor" stroke-width="32" cx="75" cy="75" r="34"></circle>
+        <line x1="249" y1="41" x2="41" y2="249" stroke="currentColor" stroke-width="32" stroke-linecap="round"></line>
+    </g>
+</svg>
\ No newline at end of file

From 9be65d6a2fefda14cc71eb20c52d157b27f6deac Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 18 Mar 2022 00:30:14 +0000
Subject: [PATCH 12/17] Update prototype.js

---
 war/src/main/webapp/scripts/prototype.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/war/src/main/webapp/scripts/prototype.js b/war/src/main/webapp/scripts/prototype.js
index 19e30c0a0f47..481dc11a269d 100644
--- a/war/src/main/webapp/scripts/prototype.js
+++ b/war/src/main/webapp/scripts/prototype.js
@@ -853,9 +853,7 @@ var Enumerable = (function() {
         iterator.call(context, value, index++);
       });
     } catch (e) {
-      // This breaks Tippy for some reason?
-      // TypeError: undefined is not an object (evaluating 'self.indexOf')
-      // if (e != $break) throw e;
+      if (e != $break) throw e;
     }
     return this;
   }
@@ -910,8 +908,8 @@ var Enumerable = (function() {
 
   function findAll(iterator, context) {
     var results = [];
-    this.each(function(value, index) {
-      if (iterator.call(context, value, index))
+    this.forEach(function(value, index, self) {
+      if (iterator.call(context, value, index, self))
         results.push(value);
     });
     return results;

From 60e423298bd8b51ff40425041afb7a11c345f37c Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 18 Mar 2022 00:31:41 +0000
Subject: [PATCH 13/17] Update tooltips.js

---
 war/src/main/js/tooltips.js | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
index 843f888774b1..fffe53bfb828 100644
--- a/war/src/main/js/tooltips.js
+++ b/war/src/main/js/tooltips.js
@@ -7,6 +7,24 @@ const TOOLTIP_BASE = {
   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()
 
 /**
@@ -14,10 +32,8 @@ registerTooltips()
  * If called again, destroys existing tooltips and registers them again (useful for progressive rendering)
  */
 function registerTooltips() {
-  [...document.querySelectorAll("*")].forEach(node => {
-    if (node._tippy) {
-      node._tippy.destroy()
-    }
+  tooltipInstances.forEach(instance => {
+    instance.destroy()
   })
 
   tippy("[tooltip]", {

From bfce09a66087cb1c7ea19826d79c5f8c9f11eb95 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 27 Mar 2022 23:31:31 +0100
Subject: [PATCH 14/17] Fix new lines in tooltips, fix empty tooltips showing

---
 core/src/main/resources/lib/hudson/buildHealth.jelly | 4 +---
 war/src/main/js/tooltips.js                          | 6 ++++--
 war/src/main/less/modules/tooltips.less              | 1 +
 war/src/main/resources/images/symbols/percentage.svg | 8 --------
 4 files changed, 6 insertions(+), 13 deletions(-)
 delete mode 100644 war/src/main/resources/images/symbols/percentage.svg

diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
index 7a0147f8c2a3..b1ce3b5f285c 100644
--- a/core/src/main/resources/lib/hudson/buildHealth.jelly
+++ b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -46,9 +46,7 @@ THE SOFTWARE.
                 <tr>
                   <th align="left">W</th>
                   <th align="left">${%Description}</th>
-                  <th align="right">
-                    <l:icon src="symbol-percentage" alt="${%Percentage}" />
-                  </th>
+                  <th align="right">%</th>
                 </tr>
               </thead>
               <tbody>
diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
index fffe53bfb828..a88d0560e3aa 100644
--- a/war/src/main/js/tooltips.js
+++ b/war/src/main/js/tooltips.js
@@ -36,8 +36,10 @@ function registerTooltips() {
     instance.destroy()
   })
 
-  tippy("[tooltip]", {
-    content: element => element.getAttribute("tooltip"),
+  tippy("[tooltip]:not([tooltip=\"\"])", {
+    content: element => element.getAttribute("tooltip")
+      .replace("<br>", "\n")
+      .replace("<br/>", "\n"),
     ...TOOLTIP_BASE
   })
 
diff --git a/war/src/main/less/modules/tooltips.less b/war/src/main/less/modules/tooltips.less
index e1f9bbf14954..382fbd550c86 100644
--- a/war/src/main/less/modules/tooltips.less
+++ b/war/src/main/less/modules/tooltips.less
@@ -8,6 +8,7 @@
   font-size: 0.75rem;
   backdrop-filter: saturate(2) blur(15px);
   max-width: unset !important;
+  white-space: pre-line;
 
   .tippy-content {
     padding: 0;
diff --git a/war/src/main/resources/images/symbols/percentage.svg b/war/src/main/resources/images/symbols/percentage.svg
deleted file mode 100644
index 3c129fa4e3ce..000000000000
--- a/war/src/main/resources/images/symbols/percentage.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="290px" height="290px" viewBox="0 0 290 290" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <circle stroke="currentColor" stroke-width="32" cx="215" cy="215" r="34"></circle>
-        <circle stroke="currentColor" stroke-width="32" cx="75" cy="75" r="34"></circle>
-        <line x1="249" y1="41" x2="41" y2="249" stroke="currentColor" stroke-width="32" stroke-linecap="round"></line>
-    </g>
-</svg>
\ No newline at end of file

From f7659aa5bb5753da56e8a2646244bc1e6956a3fe Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 27 Mar 2022 23:34:25 +0100
Subject: [PATCH 15/17] Fix last build successful from having a title

---
 war/src/main/webapp/images/build-status/build-status-sprite.svg | 1 -
 1 file changed, 1 deletion(-)

diff --git a/war/src/main/webapp/images/build-status/build-status-sprite.svg b/war/src/main/webapp/images/build-status/build-status-sprite.svg
index b2f177fafca1..6ed2c773f478 100644
--- a/war/src/main/webapp/images/build-status/build-status-sprite.svg
+++ b/war/src/main/webapp/images/build-status/build-status-sprite.svg
@@ -24,7 +24,6 @@
 	</symbol>
 
 	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="last-successful">
-		<title>last-build-successful</title>
 		<path d="M10.843 16.894L6.6 12.65l2.121-2.121 2.121 2.121 4.951-4.95 2.122 2.121-7.072 7.073z"></path>
 	</symbol>
 

From d5608a17acf64d7ecb84930f64ad58ee9e180647 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 28 Mar 2022 13:16:30 +0100
Subject: [PATCH 16/17] Fix new line in queue tooltip

---
 core/src/main/resources/lib/hudson/queue.jelly | 2 +-
 war/src/main/js/tooltips.js                    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/queue.jelly b/core/src/main/resources/lib/hudson/queue.jelly
index ff366dfea724..14fdc434c841 100644
--- a/core/src/main/resources/lib/hudson/queue.jelly
+++ b/core/src/main/resources/lib/hudson/queue.jelly
@@ -74,7 +74,7 @@ THE SOFTWARE.
               <j:set var="stuck" value="${item.isStuck()}"/>
               <j:choose>
                 <j:when test="${h.hasPermission(item.task,item.task.READ)}">
-                  <a href="${rootURL}/${item.task.url}" class="model-link inside tl-tr" tooltip="${h.escape(item.causesDescription)}${h.escape(item.why)}${h.escape(item.params)}&lt;br&gt;${%WaitingFor(item.inQueueForString)}">
+                  <a href="${rootURL}/${item.task.url}" class="model-link inside tl-tr" tooltip="${h.escape(item.causesDescription)}${h.escape(item.why)}${h.escape(item.params)}\n${%WaitingFor(item.inQueueForString)}">
                     <l:breakable value="${item.task.fullDisplayName}"/>
                   </a>
                   <!-- TODO include estimated number as in BuildHistoryWidget/entries.jelly if possible -->
diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
index a88d0560e3aa..1a1582b5d0f0 100644
--- a/war/src/main/js/tooltips.js
+++ b/war/src/main/js/tooltips.js
@@ -39,7 +39,8 @@ function registerTooltips() {
   tippy("[tooltip]:not([tooltip=\"\"])", {
     content: element => element.getAttribute("tooltip")
       .replace("<br>", "\n")
-      .replace("<br/>", "\n"),
+      .replace("<br/>", "\n")
+      .replace("\\n", "\n"),
     ...TOOLTIP_BASE
   })
 

From 32d790a37553fef5524e54ab14d2c3dec0da0155 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 28 Mar 2022 14:06:21 +0100
Subject: [PATCH 17/17] Now possible to reregister tooltips for a specific
 container

---
 .../hudson/model/Run/KeepLogBuildBadge/badge.jelly  |  2 +-
 war/src/main/js/tooltips.js                         | 13 +++++++++----
 war/src/main/webapp/scripts/hudson-behavior.js      |  1 +
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/core/src/main/resources/hudson/model/Run/KeepLogBuildBadge/badge.jelly b/core/src/main/resources/hudson/model/Run/KeepLogBuildBadge/badge.jelly
index b2c402d2c44e..9c8b370e20ab 100644
--- a/core/src/main/resources/hudson/model/Run/KeepLogBuildBadge/badge.jelly
+++ b/core/src/main/resources/hudson/model/Run/KeepLogBuildBadge/badge.jelly
@@ -23,4 +23,4 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<l:icon class="icon-lock icon-sm" tooltip="${%Keep this build forever}:&lt;br/&gt;${h.xmlEscape(build.whyKeepLog)}" xmlns:l="/lib/layout"/>
+<l:icon class="icon-lock icon-sm" tooltip="${%Keep this build forever}:\n${h.xmlEscape(build.whyKeepLog)}" xmlns:l="/lib/layout"/>
diff --git a/war/src/main/js/tooltips.js b/war/src/main/js/tooltips.js
index 1a1582b5d0f0..9d1b6aac2809 100644
--- a/war/src/main/js/tooltips.js
+++ b/war/src/main/js/tooltips.js
@@ -30,23 +30,28 @@ registerTooltips()
 /**
  * Registers tooltips for the page
  * If called again, destroys existing tooltips and registers them again (useful for progressive rendering)
+ * @param {HTMLElement} container - Registers the tooltips for the given container
  */
-function registerTooltips() {
+function registerTooltips(container = document) {
   tooltipInstances.forEach(instance => {
-    instance.destroy()
+    if (instance.props.container === container) {
+      instance.destroy()
+    }
   })
 
-  tippy("[tooltip]:not([tooltip=\"\"])", {
+  tippy(container.querySelectorAll("[tooltip]:not([tooltip=\"\"])"), {
     content: element => element.getAttribute("tooltip")
       .replace("<br>", "\n")
       .replace("<br/>", "\n")
       .replace("\\n", "\n"),
+    container: container,
     ...TOOLTIP_BASE
   })
 
-  tippy("[html-tooltip]", {
+  tippy(container.querySelectorAll("[html-tooltip]"), {
     content: element => element.getAttribute("html-tooltip"),
     allowHTML: true,
+    container: container,
     ...TOOLTIP_BASE
   })
 }
diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
index 9b20904f4b32..9fc6339af53b 100644
--- a/war/src/main/webapp/scripts/hudson-behavior.js
+++ b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -1736,6 +1736,7 @@ function refreshPart(id,url) {
 
                     Behaviour.applySubtree(node);
                     layoutUpdateCallback.call();
+                    registerTooltips(node)
                 }
             });
         }