278567b33248ccea53eb047f876897a87d470d1e
chmalee
  Fri Sep 29 14:51:16 2023 -0700
Add a javascript function for converting two html nodes to be pop ups, the first node is the hoverable element and the second node is the pop up text/html, refs #32011

diff --git src/hg/js/utils.js src/hg/js/utils.js
index 830b712..47f5766 100644
--- src/hg/js/utils.js
+++ src/hg/js/utils.js
@@ -4050,30 +4050,35 @@
         mouseoverContainer.style.position = "fixed";
         mouseoverContainer.style.display = "inline-block";
         mouseoverContainer.style.visibility = "hidden";
         mouseoverContainer.style.opacity = "0";
         mouseoverContainer.id = "mouseoverContainer";
         mouseoverContainer.style.fontSize = window.browserTextSize + "px";
         document.body.append(mouseoverContainer);
     }
     // create a mouseover element out of text, or, if text is null, use already
     // created ele2 and just show it
     newEl = ele2;
     if (text !== null) {
         newEl = document.createElement("span");
         newEl.style = "max-width: 400px"; // max width of the mouseover text
         newEl.innerHTML = text;
+    } else {
+        text = ele2.innerHTML;
+        // if newEl was already created (as in on the server side), then
+        // it may have had it's visibility hidden by default for page load purposes
+        newEl.style.display = "inline-block";
     }
     if (ele1) {
         newDiv = document.createElement("div");
         newDiv.className = "tooltip";
         newDiv.style.position = "fixed";
         newDiv.style.display = "inline-block";
         if (ele1.title) {
             newDiv.id = replaceReserved(ele1.title);
             ele1.title = "";
         } else {
             newDiv.id = replaceReserved(text);
         }
         if (ele1.coords) {
             newDiv.id += "_" + ele1.coords.replaceAll(",","_");
         }
@@ -4087,30 +4092,42 @@
 function titleTagToMouseover(mapEl) {
     /* for a given area tag, extract the title text into a div that can be positioned
     * like a standard tooltip mouseover next to the item */
     addMouseover(mapEl, mapEl.title);
 }
 
 function convertTitleTagsToMouseovers() {
     /* make all the title tags in the ideogram or main image have mouseovers */
     $("[name=ideoMap]>[title],#imgTbl [title]").each(function(i, a) {
         if (a.title !== undefined && a.title.length > 0) {
             titleTagToMouseover(a);
         }
     });
 }
 
+function tooltipNodesToMouseover() {
+    /* For server side printed tooltip texts, make them work as pop ups.
+     * Note this assumes two siblings nodes placed next to each other:
+     *    <nodeName class="Tooltip">the text or element that is hoverable</nodename>
+     *    <nodeName class="Tooltiptext'>the text/html of the popup itself
+     * Please note that the Tooltiptext node can have any arbitrary html in it, like
+     * line breaks or links*/
+    $(".Tooltip").each(function(i, n) {
+        addMouseover(n, null, n.nextSibling);
+    });
+}
+
 function parseUrl(url) {
     // turn a url into some of it's components like server, query-string, etc
     let protocol, serverName, pathInfo, queryString;
     let temp;
     temp = url.split("?");
     if (temp.length > 1)
         queryString = temp.slice(1).join("?");
     temp = temp[0].split("/");
     protocol = temp[0]; // "https:"
     serverName = temp[2]; // "genome-test.gi.ucsc.edu"
     pathInfo = temp.slice(3).join("/"); // "cgi-bin/hgTracks"
     return {protocol: protocol, serverName: serverName, pathInfo: pathInfo, queryString: queryString};
 }
 
 function dumpCart(seconds, skipNotification) {