Add Tooltip to Elided TOC Items

kiwix · Oct 7, 2024 · 78f256b · 78f256b
1 parent a02e401
commit 78f256b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/resources/css/toc.css b/resources/css/toc.css
@@ -114,6 +114,22 @@
 
 .kiwix-toc-item-a:before { content: counters(item, ".") " "; counter-increment: item; margin-right: 10px; padding-left: 10px; }
 
+.kiwix-tool-tip {
+ all: initial;
+ display: none;
+ position: fixed;
+
+ background-color: #ffffe1;
+ border: 1px solid black;
+ padding: 5px;
+
+ font-size: 16px;
+ line-height: 20px;
+ font-family: Arial;
+
+ z-index: 10000;
+}
+
 .kiwix-toc-a {
  all: inherit;
  pointer-events: none;

diff --git a/resources/js/toc.js b/resources/js/toc.js
@@ -31,7 +31,8 @@ function recurseChild(elem, recurseData)
  recurseData.toc += '</li>';
 
  recurseData.level = parseInt(level);
- recurseData.toc += '<li class="kiwix-toc-item"><a href="#' + anchor + '" class="kiwix-toc-item-a">' + headerText + '</a>';
+ recurseData.toc += '<li class="kiwix-toc-item"><a href="#' + anchor + '" class="kiwix-toc-item-a">' +
+ '<span class="kiwix-tool-tip">' + headerText + '</span>' + headerText + '</a>';
  }
 
  var c = elem.children;
@@ -63,6 +64,27 @@ function makeTOCVisible(visible)
  document.body.style.maxWidth = visible ? "calc(100vw - 310px)" : null;
 }
 
+function showToolTip (elem) {
+ var tooltip = elem.getElementsByClassName("kiwix-tool-tip")[0];
+
+ /* Check if there is overflow. */ 
+ if (tooltip && elem.offsetWidth < elem.scrollWidth)
+ {
+ tooltip.style.display = "block";
+
+ var rect = elem.getBoundingClientRect();
+ tooltip.style.top = (rect.top).toString() + "px";
+ tooltip.style.left = "306px";
+ }
+}
+
+function hideToolTip (elem) {
+ var tooltip = elem.getElementsByClassName("kiwix-tool-tip")[0];
+
+ if (tooltip)
+ tooltip.style.display = "";
+}
+
 function setupTOCItems()
 {
  var c = document.getElementsByClassName("kiwix-toc-item-a");
@@ -81,6 +103,9 @@ function setupTOCItems()
 
  /* We need manual padding to achieve visual effects on hover. */
  c[i].style.paddingLeft = ((count == -1 ? 0 : count) * 30).toString() + "px";
+
+ c[i].addEventListener("mouseover", (event) => { showToolTip(event.target); });
+ c[i].addEventListener("mouseout", (event) => { hideToolTip(event.target); });
  }
  }
 }