From 3da4766f4eef50f5c52f88c09e02d08e7b531720 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 10 May 2023 23:01:43 +0200
Subject: [PATCH 1/2] Only show one tippy at a time

---
 web_src/js/modules/tippy.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 6cec95d7661a5..385902f0c6770 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -1,5 +1,7 @@
 import tippy from 'tippy.js';
 
+const visibleInstances = new Set();
+
 export function createTippy(target, opts = {}) {
   const instance = tippy(target, {
     appendTo: document.body,
@@ -9,6 +11,14 @@ export function createTippy(target, opts = {}) {
     interactiveBorder: 20,
     ignoreAttributes: true,
     maxWidth: 500, // increase over default 350px
+    onHide: (instance) => visibleInstances.delete(instance),
+    onDestroy: (instance) => visibleInstances.delete(instance),
+    onShow: (instance) => {
+      for (const visibleInstance of visibleInstances) {
+        visibleInstance.hide(); // hide other instances
+      }
+      visibleInstances.add(instance);
+    },
     arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
     ...(opts?.role && {theme: opts.role}),
     ...opts,

From 38c972e3d69ea1f91860c0cefcd6cc9056409e08 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 11 May 2023 00:36:24 +0200
Subject: [PATCH 2/2] don't return in handlers as tippy checks return value for
 'false'

---
 web_src/js/modules/tippy.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 385902f0c6770..3a8c7e09c26b9 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -11,8 +11,12 @@ export function createTippy(target, opts = {}) {
     interactiveBorder: 20,
     ignoreAttributes: true,
     maxWidth: 500, // increase over default 350px
-    onHide: (instance) => visibleInstances.delete(instance),
-    onDestroy: (instance) => visibleInstances.delete(instance),
+    onHide: (instance) => {
+      visibleInstances.delete(instance);
+    },
+    onDestroy: (instance) => {
+      visibleInstances.delete(instance);
+    },
     onShow: (instance) => {
       for (const visibleInstance of visibleInstances) {
         visibleInstance.hide(); // hide other instances