ui: add tooltips to non-full tags globally

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>

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 105adc45d6b5559d5b7b618568f79310ee7fd8a4..782c90442ecec241e8bac868f58f8a574ceada43 100644 (file)
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -726,3 +726,13 @@ table.osds td:first-of-type {
 .proxmox-tag-fieldset.proxmox-tags-full .x-component.x-column {
     margin: 2px;
 }
+
+/* we have to override some styles for the tag tooltips,
+ * otherwise extjs styling interferes */
+.pmx-tag-tooltip {
+    background-color: transparent;
+}
+
+.pmx-tag-tooltip .proxmox-tags-full > span {
+    margin: 0px;
+}

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 18d574b7588552173d109f36b41ecaba7049b3b3..6e465f8d35c2a2463be5994388b9b7914d3e11f6 100644 (file)
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -526,6 +526,35 @@ 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(),
+           border: 0,
+           minWidth: 0,
+           padding: 0,
+           bodyBorder: 0,
+           bodyPadding: 0,
+           dismissDelay: 0,
+           userCls: 'pmx-tag-tooltip',
+           shadow: false,
+           listeners: {
+               beforeshow: function(tip) {
+                   let tag = Ext.htmlEncode(tip.triggerElement.innerHTML);
+                   let tagEl = Proxmox.Utils.getTagElement(tag, PVE.UIOptions.tagOverrides);
+                   tip.update(`<span class="proxmox-tags-full">${tagEl}</span>`);
+               },
+           },
+       });
     },
 });