diff --git a/front/css/app.css b/front/css/app.css
index 14625ac0..8314789c 100755
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -1716,11 +1716,34 @@ input[readonly] {
width: auto;
}
+
#hover-box
{
background-color: #ffffff;;
}
+#hover-box .iconPreview
+{
+ padding: 0px;
+ display: flex;
+}
+
+#hover-box .devName
+{
+ font-size: larger;
+ display: contents;
+}
+
+#hover-box b
+{
+ float: left;
+}
+
+#hover-box span
+{
+ float: right;
+}
+
#networkTree .netCollapse
{
position: absolute;
diff --git a/front/js/ui_components.js b/front/js/ui_components.js
index 417da88b..ed754e66 100755
--- a/front/js/ui_components.js
+++ b/front/js/ui_components.js
@@ -418,9 +418,14 @@ function goToNetworkNode(mac)
// -----------------------------------------------------------------------------
// Go to the device
-function goToDevice(mac)
-{
- window.location.href = './deviceDetails.php?mac=' + mac;
+function goToDevice(mac, newtab = false) {
+ const url = './deviceDetails.php?mac=' + encodeURIComponent(mac);
+
+ if (newtab) {
+ window.open(url, '_blank');
+ } else {
+ window.location.href = url;
+ }
}
@@ -828,6 +833,7 @@ function initHoverNodeInfo() {
});
}
+ // check if handlers already attached to prevent flickering
if (initHoverNodeInfo._handlersAttached) return;
initHoverNodeInfo._handlersAttached = true;
@@ -838,22 +844,30 @@ function initHoverNodeInfo() {
const $el = $(this);
lastTarget = this;
+ // use timeout to prevent a quick hover and exit toi flash a card when navigating to a target node with your mouse
clearTimeout(hoverTimeout);
hoverTimeout = setTimeout(() => {
if (lastTarget !== this) return;
+ const icon = $el.data('icon');
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 lastseen = $el.data('lastseen') || 'Unknown';
const relationship = $el.data('relationship') || 'Unknown';
+ const badge = getStatusBadgeParts( $el.data('present'), $el.data('alert'), $el.data('mac'))
+ const status =`${badge.iconHtml} ${badge.status}`
const html = `
- ${name}
- IP: ${ip}
- MAC: ${mac}
- Vendor: ${vendor}
+
+