fix: keep popover open when cursor moves into it

Bootstrap 5 hover trigger fires mouseleave on the trigger before
mouseenter on the popover, closing it before the Trace link can be
clicked. Switch to trigger:manual and wire mouseenter/mouseleave on
both the trigger element and the popover tip itself using a shared
dvInitPopover() helper.

Author: peterbaumert

netbox_device_view/templates/netbox_device_view/deviceview.html

@@ -94,6 +94,44 @@
 	</div>
 </div>
 
+<script>
+// Shared popover helper — keeps popover open when cursor moves into it.
+// Bootstrap 5 hover trigger closes on mouseleave of the trigger element
+// before mouseenter on the popover fires. We use trigger:"manual" and
+// wire both elements ourselves so the popover stays open over either one.
+function dvInitPopover(el, opts) {
+  if (typeof Popover === "undefined") return;
+  var pop = new Popover(el, {
+    trigger: "manual",
+    html: true,
+    container: "body",
+    placement: "top",
+    customClass: "device-view-tooltip",
+    title: opts.title || "",
+    content: opts.content || ""
+  });
+  var hideTimer = null;
+  function scheduleHide() {
+    hideTimer = setTimeout(function () { pop.hide(); }, 300);
+  }
+  function cancelHide() {
+    clearTimeout(hideTimer);
+  }
+  el.addEventListener("mouseenter", function () { cancelHide(); pop.show(); });
+  el.addEventListener("mouseleave", scheduleHide);
+  el.addEventListener("shown.bs.popover", function () {
+    var tip = Popover.getInstance(el) && Popover.getInstance(el)._tip;
+    if (!tip) {
+      var popovers = document.querySelectorAll(".popover");
+      tip = popovers[popovers.length - 1];
+    }
+    if (tip) {
+      tip.addEventListener("mouseenter", cancelHide);
+      tip.addEventListener("mouseleave", scheduleHide);
+    }
+  });
+}
+</script>
 {% if use_svg %}
 {# ── SVG interactivity script ── #}
 <script>
@@ -177,7 +215,7 @@
         var svgTitle = g.querySelector("title");
         if (svgTitle) svgTitle.textContent = p.name;
         if (typeof Popover !== "undefined") {
-          new Popover(g, { trigger: "hover focus", html: true, container: "body", delay: { show: 200, hide: 300 } });
+          dvInitPopover(g, { title: popTitle, content: popContent });
         }
       });
     });
@@ -207,7 +245,10 @@ <h4>Options</h4>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
   document.querySelectorAll('.device-view-port[data-bs-toggle="popover"]').forEach(function (el) {
-    new Popover(el, { trigger: "hover focus", html: true, container: "body", delay: { show: 200, hide: 300 } });
+    dvInitPopover(el, {
+      title: el.getAttribute("data-bs-title"),
+      content: el.getAttribute("data-bs-content")
+    });
   });
 });
 </script>

netbox_device_view/templates/netbox_device_view/ports.html

@@ -91,6 +91,45 @@ <h2 class="card-header">Deviceview {% if object.virtual_chassis %}{{ object.virt
 	</div>
 </div>
 
+<script>
+// Shared popover helper — keeps popover open when cursor moves into it.
+// Bootstrap 5 hover trigger closes on mouseleave of the trigger element
+// before mouseenter on the popover fires. We use trigger:"manual" and
+// wire both elements ourselves so the popover stays open over either one.
+function dvInitPopover(el, opts) {
+  if (typeof Popover === "undefined") return;
+  var pop = new Popover(el, {
+    trigger: "manual",
+    html: true,
+    container: "body",
+    placement: "top",
+    customClass: "device-view-tooltip",
+    title: opts.title || "",
+    content: opts.content || ""
+  });
+  var hideTimer = null;
+  function scheduleHide() {
+    hideTimer = setTimeout(function () { pop.hide(); }, 300);
+  }
+  function cancelHide() {
+    clearTimeout(hideTimer);
+  }
+  el.addEventListener("mouseenter", function () { cancelHide(); pop.show(); });
+  el.addEventListener("mouseleave", scheduleHide);
+  el.addEventListener("shown.bs.popover", function () {
+    var tip = Popover.getInstance(el) && Popover.getInstance(el)._tip;
+    if (!tip) {
+      // fallback: grab the most recently appended popover in body
+      var popovers = document.querySelectorAll(".popover");
+      tip = popovers[popovers.length - 1];
+    }
+    if (tip) {
+      tip.addEventListener("mouseenter", cancelHide);
+      tip.addEventListener("mouseleave", scheduleHide);
+    }
+  });
+}
+</script>
 {% if use_svg %}
 {# ── SVG interactivity script ── #}
 <script>
@@ -172,7 +211,7 @@ <h2 class="card-header">Deviceview {% if object.virtual_chassis %}{{ object.virt
         var svgTitle = g.querySelector("title");
         if (svgTitle) svgTitle.textContent = p.name;
         if (typeof Popover !== "undefined") {
-          new Popover(g, { trigger: "hover focus", html: true, container: "body", delay: { show: 200, hide: 300 } });
+          dvInitPopover(g, { title: popTitle, content: popContent });
         }
       });
     });
@@ -188,7 +227,10 @@ <h2 class="card-header">Deviceview {% if object.virtual_chassis %}{{ object.virt
 <script>
 document.addEventListener("DOMContentLoaded", function () {
   document.querySelectorAll('.device-view-port[data-bs-toggle="popover"]').forEach(function (el) {
-    new Popover(el, { trigger: "hover focus", html: true, container: "body", delay: { show: 200, hide: 300 } });
+    dvInitPopover(el, {
+      title: el.getAttribute("data-bs-title"),
+      content: el.getAttribute("data-bs-content")
+    });
   });
 });
 </script>