[pve-devel] [PATCH manager 2/2] ui: add tooltips to non-full tags globally

[Dominik Csapak <d.csapak@proxmox.com>]

by using the delegate function of ExtJS' tooltips on the global
Workspace element and using the proper css selectors

this way, we can limit the tooltips to the non-full ones
(in contrast to using data-qtip on the element, which would
always be show, even for tags with the 'full' style)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
honestly not sure if this has any performance impacts, since it somehow
has to attach an event handler to the global object which has to do work
now every time to check for the css classes...

 www/manager6/Workspace.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 18d574b7..cb998e8a 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -526,6 +526,26 @@ Ext.define('PVE.StdWorkspace', {
 		modalWindows.forEach(win => win.alignTo(me, 'c-c'));
 	    }
 	});
+
+	let tagSelectors = [];
+	['circle', 'dense'].forEach((style) => {
+	    ['dark', 'light'].forEach((variant) => {
+		tagSelectors.push(`.proxmox-tags-${style} .proxmox-tag-${variant}`);
+	    });
+	});
+
+	Ext.create('Ext.tip.ToolTip', {
+	    target: me.el,
+	    delegate: tagSelectors.join(', '),
+	    trackMouse: true,
+	    renderTo: Ext.getBody(),
+	    listeners: {
+		beforeshow: function(tip) {
+		    let tag = Ext.htmlEncode(tip.triggerElement.innerHTML);
+		    tip.update(tag);
+		},
+	    },
+	});
     },
 });
 
-- 
2.30.2