[JENKINS-73158] avoid jumping layout due to tooltips (jenkinsci#9263)

* [JENKINS-73158] avoid jumping layout due to tooltips The fix for JENKINS-72744 made the tooltip get appended to the parent element. But this can also cause troubles in some cases. To avoid this one can now decide whether the tooltip should be appended to the body (the default) or to the parent. Adjust all locations where a tooltip is displayed inside a widget to append it to the parent. This works well with those tooltips and avoids a jumping layout in the custom-folder-icon and potentially other places. * explicitly append to parent * fix attribute
krisstern · May 17, 2024 · 5089ad5 · 5089ad5
1 parent dabf61f
commit 5089ad5
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly b/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly
@@ -57,8 +57,8 @@ THE SOFTWARE.
 	      </j:otherwise>
 	    </j:choose>
 	  <j:if test="${!item.params.isEmpty()}">
-	    <div style="float:right;margin-right:10px;">
-	      <l:icon src="symbol-parameters" class="icon-sm" tooltip="Build Parameters:${item.params}"/>
+	    <div style="float:right;margin-right:10px;" tooltip="Build Parameters:${item.params}" data-tooltip-append-to-parent="true">
+	      <l:icon src="symbol-parameters" class="icon-sm" />
 	    </div>
 	  </j:if>
 	  </div>

diff --git a/core/src/main/resources/lib/hudson/progressBar.jelly b/core/src/main/resources/lib/hudson/progressBar.jelly
@@ -55,6 +55,7 @@ THE SOFTWARE.
     <x:attribute name="class">app-progress-bar ${attrs.large?'app-progress-bar--large':null} ${attrs.red?'app-progress-bar--error':null}</x:attribute>
     <x:attribute name="href">${attrs.href}</x:attribute>
     <x:attribute name="tooltip">${attrs.tooltip}</x:attribute>
+    <x:attribute name="data-tooltip-append-to-parent">true</x:attribute>
     <x:attribute name="id">${attrs.id}</x:attribute>
     <x:attribute name="data-tooltip-template">${attrs.tooltipTemplate}</x:attribute>
       <j:choose>

diff --git a/core/src/main/resources/lib/hudson/queue.jelly b/core/src/main/resources/lib/hudson/queue.jelly
@@ -74,7 +74,9 @@ 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="${item.causesDescription} ${item.why} ${item.params} \n ${%WaitingFor(item.inQueueForString)}">
+                  <a href="${rootURL}/${item.task.url}" class="model-link inside tl-tr"
+                     tooltip="${item.causesDescription} ${item.why} ${item.params} \n ${%WaitingFor(item.inQueueForString)}"
+                     data-tooltip-append-to-parent="true">
                     <l:breakable value="${item.displayName}"/>
                   </a>
                   <!-- TODO include estimated number as in BuildHistoryWidget/entries.jelly if possible -->

diff --git a/core/src/main/resources/lib/layout/stopButton.jelly b/core/src/main/resources/lib/layout/stopButton.jelly
@@ -39,12 +39,12 @@ THE SOFTWARE.
     </st:documentation>
     <j:choose>
       <j:when test="${confirm == null}">
-        <a class="stop-button-link" href="${href}" tooltip="${alt}">
+        <a class="stop-button-link" href="${href}" tooltip="${alt}" data-tooltip-append-to-parent="true">
           <l:icon src="symbol-close" />
         </a>
       </j:when>
       <j:otherwise>
-        <a class="stop-button-link" href="${href}" data-confirm="${confirm}" tooltip="${alt}">
+        <a class="stop-button-link" href="${href}" data-confirm="${confirm}" tooltip="${alt}" data-tooltip-append-to-parent="true">
           <l:icon src="symbol-close" />
         </a>
       </j:otherwise>

diff --git a/war/src/main/js/components/tooltips/index.js b/war/src/main/js/components/tooltips/index.js
@@ -5,7 +5,6 @@ const TOOLTIP_BASE = {
   arrow: false,
   theme: "tooltip",
   animation: "tooltip",
-  appendTo: "parent",
 };
 
 /**
@@ -21,6 +20,10 @@ function registerTooltip(element) {
 
   const tooltip = element.getAttribute("tooltip");
   const htmlTooltip = element.getAttribute("data-html-tooltip");
+  let appendTo = document.body;
+  if (element.hasAttribute("data-tooltip-append-to-parent")) {
+    appendTo = "parent";
+  }
   if (
     tooltip !== null &&
     tooltip.trim().length > 0 &&
@@ -40,6 +43,7 @@ function registerTooltip(element) {
           onHidden(instance) {
             instance.reference.setAttribute("title", instance.props.content);
           },
+          appendTo: appendTo,
         },
         TOOLTIP_BASE,
       ),
@@ -58,6 +62,7 @@ function registerTooltip(element) {
               instance.reference.getAttribute("data-tooltip-interactive") ===
               "true";
           },
+          appendTo: appendTo,
         },
         TOOLTIP_BASE,
       ),