From 92f282b2957acd7cc4b752d885652fadf293fae4 Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Thu, 4 Jan 2024 16:01:31 +0100
Subject: [PATCH] mvc/bootgrid - show tooltip when grid td content doesn't fit
 and remove similar functionality from Reporting: Unbound DNS to avoid
 duplication.

---
 src/opnsense/mvc/app/views/OPNsense/Unbound/overview.volt | 2 +-
 src/opnsense/www/js/opnsense_bootgrid_plugin.js           | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Unbound/overview.volt b/src/opnsense/mvc/app/views/OPNsense/Unbound/overview.volt
index b1813c448..2fc8d97c1 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Unbound/overview.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Unbound/overview.volt
@@ -632,7 +632,7 @@
                                     return row.resolve_time_ms + 'ms';
                                 },
                                 "domain": function (column, row) {
-                                    return '<span class="domain-content" data-toggle="tooltip" title="' + row.domain + '">' + row.domain + '</span>';
+                                    return row.domain;
                                 },
                                 "commands": function (column, row) {
                                     if (bl_enabled.enabled == 0) {
diff --git a/src/opnsense/www/js/opnsense_bootgrid_plugin.js b/src/opnsense/www/js/opnsense_bootgrid_plugin.js
index a79a9c465..c54011ff7 100644
--- a/src/opnsense/www/js/opnsense_bootgrid_plugin.js
+++ b/src/opnsense/www/js/opnsense_bootgrid_plugin.js
@@ -543,6 +543,14 @@ $.fn.UIBootgrid = function (params) {
                     $(this).tooltip();
                 });
 
+                // tooltip when ellipsis is used (overflow on text elements without children)
+                $(this).find("td").bind('mouseenter', function(){
+                    let $this = $(this);
+                    if (this.offsetWidth < this.scrollWidth && !$this.attr('title') && $this.children().length == 0){
+                        $this.attr('title', $this.text()).tooltip({container: 'body', trigger: 'hover'}).tooltip('show');
+                    }
+                });
+
                 // hook all events
                 const commands = this_grid.getCommands();
                 Object.keys(commands).map(function (k) {