From a72caac1fcefce93f6ae3724d821fca94d595aa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Tak=C3=A1cs?=
 <93127072+PeterTakacs300@users.noreply.github.com>
Date: Fri, 21 Jul 2023 05:42:27 +0200
Subject: [PATCH] IDEMPIERE-5805 - Dashboard Help Icon Produces Unwanted
 Network Requests (#1947)

---
 .../WEB-INF/src/metainfo/zk/lang-addon.xml    |  2 +-
 .../webui/desktop/DashboardController.java    | 31 +++++--------------
 .../theme/default/css/fragment/gadget.css.dsp | 20 ++++++++++++
 3 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml b/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml
index 55a19eeb98..a2519cd241 100644
--- a/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml
+++ b/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml
@@ -57,6 +57,6 @@ Copyright (C) 2007 Ashley G Ramdass (ADempiere WebUI).
 	
 	<!-- this js module doesn't actually exists and it is here for default theme version -->
 	<!-- since loading of  js module is on demand, it doesn't cause any error as long as you don't try to load it -->
-	<javascript-module name="idempiere.theme.default" version="202307100900" />
+	<javascript-module name="idempiere.theme.default" version="202307191000" />
 
 </language>
diff --git a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DashboardController.java b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DashboardController.java
index bbc323ee4e..25f0af4a05 100644
--- a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DashboardController.java
+++ b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DashboardController.java
@@ -117,7 +117,6 @@ import org.zkoss.zul.Iframe;
 import org.zkoss.zul.Include;
 import org.zkoss.zul.Panel;
 import org.zkoss.zul.Panelchildren;
-import org.zkoss.zul.Popup;
 import org.zkoss.zul.Separator;
 import org.zkoss.zul.Timer;
 import org.zkoss.zul.Toolbar;
@@ -434,32 +433,18 @@ public class DashboardController implements EventListener<Event> {
 	 * @param text
 	 */
 	private void renderHelpButton(Caption caption, String text) {
-		A help = new A();
-		help.setSclass("dashboard-content-help-icon");
-		help.setVisible(false);
+		A icon = new A();
+		icon.setSclass("dashboard-content-help-icon");
 		if (ThemeManager.isUseFontIconForImage())
-			help.setIconSclass("z-icon-Help");
+			icon.setIconSclass("z-icon-Help");
 		else
-			help.setImage(ThemeManager.getThemeResource(IMAGES_CONTEXT_HELP_PNG));
-		caption.appendChild(help);
-		Popup popup = new Popup();
-		popup.setPopup(popup);
+			icon.setImage(ThemeManager.getThemeResource(IMAGES_CONTEXT_HELP_PNG));
+		caption.appendChild(icon);
+		Div popup = new Div();
 		Text t = new Text(text);
-		popup.setSclass("dashboard-content-help");
+		popup.setSclass("dashboard-content-help-popup");
 		popup.appendChild(t);
-		help.setTooltip(popup);
-		help.addEventListener(Events.ON_MOUSE_OVER, (Event event) -> {
-			popup.setPage(help.getPage());
-			popup.open(help, "after_start");
-			LayoutUtils.autoDetachOnClose(popup);
-		});
-		caption.addEventListener(Events.ON_MOUSE_OVER, (Event event) -> {
-			help.setVisible(true);
-		});
-		caption.addEventListener(Events.ON_MOUSE_OUT, (Event event) -> {
-			popup.detach();
-			help.setVisible(false);
-		});
+		caption.appendChild(popup);
 	}
 
 	/**
diff --git a/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/gadget.css.dsp b/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/gadget.css.dsp
index 3b4e976737..22b27ddf8d 100644
--- a/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/gadget.css.dsp
+++ b/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/gadget.css.dsp
@@ -341,6 +341,26 @@
 .dashboard-content-help-icon {
 	padding: 5px;
 	cursor: default;
+	visibility: hidden;
+}
+
+.z-caption:hover .dashboard-content-help-icon {
+	visibility: visible;
+}
+
+.dashboard-content-help-popup {
+	display: none;
+}
+
+.dashboard-content-help-icon:hover ~ .dashboard-content-help-popup {
+	display: inline-flex;
+	background: black;
+	color: white;
+	border-radius: 5px;
+	padding: 4px 7px;
+    position: fixed;
+    z-index: 1800;
+    max-width: 300px;
 }
 
 .fill-mandatory-process-para-wrapper {