css hover box #724

front/css/app.css

@@ -1716,6 +1716,10 @@ input[readonly] {
     width: auto;
 }
 
+#hover-box
+{
+  background-color: #ffffff;;
+}
 
 #networkTree .netCollapse
 {
@@ -1726,7 +1730,7 @@ input[readonly] {
 #networkTree .highlightedNode
 {
     /* border: solid; */
-    border-color:cyan;
+    border-color:#3c8dbc;
 }
 #networkTree .netStatus-Off-line i,
 #networkTree .netStatus-Off-line svg

front/css/system-dark-patch.css

@@ -758,6 +758,10 @@
     color: #bec5cb;
   }
 
+  #hover-box
+  {
+    background-color: #353c42 !important;
+  }
 
 }
 

front/js/settings_utils.js

@@ -689,6 +689,9 @@ function reverseTransformers(val, transformers) {
         mac = val  // value is mac   
         val =  `${getDevDataByMac(mac, "devName")}`
         break;
+      case "deviceRelType":        
+        val =  val; // nothing to do
+        break;
       default:
         console.warn(`Unknown transformer: ${transformer}`);
     }

front/js/ui_components.js

@@ -809,11 +809,99 @@ function initSelect2() {
   }  
 }
 
+// ------------------------------------------
+// Display device info on hover (attach only once)
+function initHoverNodeInfo() {
+  if ($('#hover-box').length === 0) {
+    $('<div id="hover-box"></div>').appendTo('body').hide().css({
+      position: 'absolute',
+      zIndex: 9999,
+      border: '1px solid #ccc',
+      borderRadius: '8px',
+      padding: '10px',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+      minWidth: '200px',
+      maxWidth: '300px',
+      fontSize: '14px',
+      pointerEvents: 'none',
+      backgroundColor: '#fff'
+    });
+  }
+
+  if (initHoverNodeInfo._handlersAttached) return;
+  initHoverNodeInfo._handlersAttached = true;
+
+  let hoverTimeout = null;
+  let lastTarget = null;
+
+  $(document).on('mouseenter', '.hover-node-info', function (e) {
+    const $el = $(this);
+    lastTarget = this;
+
+    clearTimeout(hoverTimeout);
+
+    hoverTimeout = setTimeout(() => {
+      if (lastTarget !== this) return;
+
+      const name = $el.data('name') || 'Unknown';
+      const ip = $el.data('ip') || 'N/A';
+      const mac = $el.data('mac') || 'N/A';
+      const vendor = $el.data('vendor') || 'Unknown';
+      const relationship = $el.data('relationship') || 'Unknown';
+
+      const html = `
+        <strong>${name}</strong><br>
+        <b>IP:</b> ${ip}<br>
+        <b>MAC:</b> ${mac}<br>
+        <b>Vendor:</b> ${vendor}<br>
+        <b>Relationship:</b> <span class="${getRelationshipConf(relationship).cssClass}">${relationship}</span>
+      `;
+
+      $('#hover-box').html(html).fadeIn(150);
+    }, 300);
+  });
+
+  $(document).on('mousemove', '.hover-node-info', function (e) {
+    const hoverBox = $('#hover-box');
+    const boxWidth = hoverBox.outerWidth();
+    const boxHeight = hoverBox.outerHeight();
+    const padding = 15;
+
+    const winWidth = $(window).width();
+    const winHeight = $(window).height();
+
+    let left = e.pageX + padding;
+    let top = e.pageY + padding;
+
+    // Position leftward if close to right edge
+    if (e.pageX + boxWidth + padding > winWidth) {
+      left = e.pageX - boxWidth - padding;
+    }
+
+    // Position upward if close to bottom edge
+    if (e.pageY + boxHeight + padding > winHeight) {
+      top = e.pageY - boxHeight - padding;
+    }
+
+    hoverBox.css({ top: top + 'px', left: left + 'px' });
+  });
+
+  $(document).on('mouseleave', '.hover-node-info', function () {
+    clearTimeout(hoverTimeout);
+    lastTarget = null;
+    $('#hover-box').fadeOut(100);
+  });
+}
+
+
+
+
 // init functions after dom loaded
 window.addEventListener("load", function() {
   // try to initialize 
   setTimeout(() => {
-    initSelect2()
+    initSelect2();
+    initHoverNodeInfo();
     // initializeiCheck();
   }, 500);
 });

front/network.php

@@ -582,6 +582,8 @@ function getChildren(node, list, path, visited = [])
         parentMac: node.devParentMAC,
         icon: node.devIcon,
         type: node.devType,
+        vendor: node.devVendor,
+        ip: node.devLastIP,
         status: node.devStatus,
         hasChildren: children.length > 0 || hiddenMacs.includes(node.devMac),
         relType: node.devParentRelType,
@@ -749,10 +751,15 @@ function initTree(myHierarchy)
       statusCss = ` netStatus-${nodeData.data.status}`;
 
       return result = `<div 
-                            class="node-inner box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
+                            class="node-inner hover-node-info box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
                             data-mytreemacmain="${nodeData.data.mac}"
                             style="height:${nodeHeightPx}px;font-size:${nodeHeightPx-5}px;"
                             onclick="handleNodeClick(this)"
+                            data-name="${nodeData.data.name}"
+                            data-ip="${nodeData.data.ip}"
+                            data-mac="${nodeData.data.mac}"
+                            data-vendor="${nodeData.data.vendor}"
+                            data-relationship="${nodeData.data.relType}"
                         >
                           <div class="netNodeText">
                             <strong>${devicePort}  ${deviceIcon}