Add tooltip system

Signed-off-by: tdruez <[email protected]>

Author: tdruez

scancodeio/static/main.css

@@ -242,6 +242,47 @@ a[target="_blank"] .fa-up-right-from-square {
 .is-wider-x2 .dropdown-menu {
   min-width: 24rem;
 }
+.tooltip {
+  position: absolute;
+  background-color: rgb(var(--custom-tooltip-bg-rgb));
+  color: var(--bulma-white);
+  padding: var(--custom-tooltip-padding);
+  border-radius: var(--bulma-radius-small);
+  font-size: var(--bulma-size-small);
+  width: max-content;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  text-align: center;
+  word-wrap: break-word;
+  z-index: 9999;
+}
+.tooltip.visible {
+  opacity: 1;
+}
+.tooltip.top {
+  bottom: 100%;
+}
+.tooltip.bottom {
+  top: 100%;
+}
+.tooltip.left {
+  right: 0;
+}
+.tooltip.right {
+  left: 0;
+}
+.tooltip.center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.tooltip:not(.top):not(.bottom) {
+  bottom: 100%;
+}
+.tooltip:not(.left):not(.right):not(.center) {
+  left: 50%;
+  transform: translateX(-50%);
+}
 .copy-to-clipboard {
   position: relative;
 }

scancodeio/static/main.js

@@ -356,6 +356,42 @@ class PaginationNavigator {
   }
 }
 
+// Tooltips
+
+function enableTooltips() {
+  // Enable tooltips on elements with 'has-tooltip' class
+  const elements = document.querySelectorAll('.has-tooltip');
+
+  elements.forEach(element => {
+    let tooltip = null;
+
+    element.addEventListener('mouseenter', () => {
+      // Get tooltip text from data-title or title attribute
+      const tooltipText = element.getAttribute('data-title') || element.getAttribute('title');
+      if (!tooltipText) return;
+
+      // Get position classes from data attribute
+      const positionClasses = element.getAttribute('data-tooltip-position') || '';
+
+      // Create tooltip
+      tooltip = document.createElement('span');
+      tooltip.classList.add('tooltip', 'visible');
+      if (positionClasses) {
+        tooltip.classList.add(...positionClasses.split(' '));
+      }
+      tooltip.textContent = tooltipText;
+      element.appendChild(tooltip);
+    });
+
+    element.addEventListener('mouseleave', () => {
+      if (tooltip && element.contains(tooltip)) {
+        element.removeChild(tooltip);
+        tooltip = null;
+      }
+    });
+  });
+}
+
 // Copy to Clipboard (using `navigator.clipboard`)
 
 function enableCopyToClipboard(selector) {
@@ -413,6 +449,7 @@ document.addEventListener('DOMContentLoaded', function () {
   setupTextarea();
   setupHighlightControls();
   setupSelectCheckbox();
+  enableTooltips();
   enableCopyToClipboard(".copy-to-clipboard");
 
   const paginationContainer = document.querySelector("#pagination-header");
@@ -468,6 +505,7 @@ document.addEventListener('DOMContentLoaded', function () {
 document.body.addEventListener("htmx:afterSwap", function(evt) {
   // Call the following functions after a HTMX swap is done.
   setupTabs();
+  enableTooltips();
   enableCopyToClipboard(".copy-to-clipboard");
 });
 

scanpipe/templates/scanpipe/tree/resource_left_pane_header.html

@@ -1,5 +1,9 @@
 <div class="is-flex is-align-items-center mb-2">
-  <button id="hide-left-pane" class="button is-light px-2">
+  <button
+    id="hide-left-pane"
+    class="button is-light px-2 has-tooltip"
+    data-title="Hide resource tree"
+    data-tooltip-position="bottom right">
     <i class="fa-solid fa-square-caret-left"></i>
   </button>
   <div class="is-size-5 has-text-weight-semibold ml-2">

scanpipe/templates/scanpipe/tree/resource_path_breadcrumb.html

@@ -1,5 +1,9 @@
 <nav class="breadcrumb is-flex is-align-items-center" aria-label="breadcrumbs">
-  <button id="expand-left-pane" class="button is-light px-2 mr-2 is-hidden">
+  <button
+    id="expand-left-pane"
+    class="button is-light px-2 mr-2 has-tooltip is-hidden"
+    data-title="Show resource tree"
+    data-tooltip-position="bottom right">
     <i class="fa-solid fa-square-caret-right"></i>
   </button>
   <ul>