From d06b47cccdd1a27311a6f3342f80a139e0355299 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 19 Mar 2023 21:40:44 +0800
Subject: [PATCH 1/7] fix

---
 .../repo/issue/view_content/sidebar.tmpl      |   4 +-
 templates/repo/sub_menu.tmpl                  |   2 +-
 web_src/js/components/DashboardRepoList.vue   |   4 -
 web_src/js/components/DiffFileList.vue        |  12 --
 web_src/js/features/common-global.js          |   7 --
 web_src/js/features/repo-diff.js              |   5 -
 web_src/js/features/repo-issue.js             |   5 +-
 web_src/js/index.js                           |   2 +-
 web_src/js/modules/tippy.js                   | 110 ++++++++++++++----
 9 files changed, 95 insertions(+), 56 deletions(-)

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 40d87b41785b8..428129715195b 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -664,9 +664,9 @@
 			{{if and (not (eq .Issue.PullRequest.HeadRepo.FullName .Issue.PullRequest.BaseRepo.FullName)) .CanWriteToHeadRepo}}
 				<div class="ui divider"></div>
 				<div class="inline field">
-					<div class="ui checkbox" id="allow-edits-from-maintainers"
+					<div class="ui checkbox tooltip" id="allow-edits-from-maintainers"
 							data-url="{{.Issue.Link}}"
-							data-prompt-tip="{{.locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"
+							data-tooltip-content="{{.locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"
 							data-prompt-error="{{.locale.Tr "repo.pulls.allow_edits_from_maintainers_err"}}"
 						>
 						<label><strong>{{.locale.Tr "repo.pulls.allow_edits_from_maintainers"}}</strong></label>
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 5c1688d019689..adb1e3079fc3c 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -40,7 +40,7 @@
 	</div>
 	<a class="ui segment language-stats">
 		{{range .LanguageStats}}
-		<div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-placement="top" data-content={{.Language}}>&nbsp;</div>
+		<div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}}>&nbsp;</div>
 		{{end}}
 	</a>
 	{{end}}
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 075af65af38c0..a97cfb02babe6 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -147,7 +147,6 @@
 <script>
 import {createApp, nextTick} from 'vue';
 import $ from 'jquery';
-import {initTooltip} from '../modules/tippy.js';
 import {SvgIcon} from '../svg.js';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
@@ -238,9 +237,6 @@ const sfc = {
   mounted() {
     const el = document.getElementById('dashboard-repo-list');
     this.changeReposFilter(this.reposFilter);
-    for (const elTooltip of el.querySelectorAll('.tooltip')) {
-      initTooltip(elTooltip);
-    }
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
       this.$refs.search.focus();
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 32919156b8ddd..86444f2b21995 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import {initTooltip} from '../modules/tippy.js';
 import {doLoadMoreFiles} from '../features/repo-diff.js';
 
 const {pageData} = window.config;
@@ -30,17 +29,6 @@ export default {
   data: () => {
     return pageData.diffFileInfo;
   },
-  watch: {
-    fileListIsVisible(newValue) {
-      if (newValue === true) {
-        this.$nextTick(() => {
-          for (const el of this.$refs.root.querySelectorAll('.tooltip')) {
-            initTooltip(el);
-          }
-        });
-      }
-    }
-  },
   mounted() {
     document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
   },
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index cdb9132805d39..7bc0b4f2f2e22 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -6,7 +6,6 @@ import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {attachCheckboxAria, attachDropdownAria} from './aria.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
-import {initTooltip} from '../modules/tippy.js';
 import {svg} from '../svg.js';
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 
@@ -67,12 +66,6 @@ export function initGlobalButtonClickOnEnter() {
   });
 }
 
-export function initGlobalTooltips() {
-  for (const el of document.getElementsByClassName('tooltip')) {
-    initTooltip(el);
-  }
-}
-
 export function initGlobalCommon() {
   // Undo Safari emoji glitch fix at high enough zoom levels
   if (navigator.userAgent.match('Safari')) {
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 56ebe4fc991ef..458f11c6f2b30 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -3,7 +3,6 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
 import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
-import {initTooltip} from '../modules/tippy.js';
 
 const {csrfToken} = window.config;
 
@@ -60,10 +59,6 @@ export function initRepoDiffConversationForm() {
     const $newConversationHolder = $(await $.post($form.attr('action'), formDataString));
     const {path, side, idx} = $newConversationHolder.data();
 
-    $newConversationHolder.find('.tooltip').each(function () {
-      initTooltip(this);
-    });
-
     $form.closest('.conversation-holder').replaceWith($newConversationHolder);
     if ($form.closest('tr').data('line-type') === 'same') {
       $(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible');
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index e49b1b2726f2d..767f07115158c 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -4,7 +4,7 @@ import {attachTribute} from './tribute.js';
 import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
 import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
-import {initTooltip, showTemporaryTooltip, createTippy} from '../modules/tippy.js';
+import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 import {setFileFolding} from './file-fold.js';
 
@@ -280,10 +280,7 @@ export function initRepoPullRequestAllowMaintainerEdit() {
   const $checkbox = $('#allow-edits-from-maintainers');
   if (!$checkbox.length) return;
 
-  const promptTip = $checkbox.attr('data-prompt-tip');
   const promptError = $checkbox.attr('data-prompt-error');
-
-  initTooltip($checkbox[0], {content: promptTip});
   $checkbox.checkbox({
     'onChange': () => {
       const checked = $checkbox.checkbox('is checked');
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 480661118bc65..5c9bbc15de7cf 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -56,7 +56,6 @@ import {
   initGlobalFormDirtyLeaveConfirm,
   initGlobalLinkActions,
   initHeadNavbarContentToggle,
-  initGlobalTooltips,
 } from './features/common-global.js';
 import {initRepoTopicBar} from './features/repo-home.js';
 import {initAdminEmails} from './features/admin/emails.js';
@@ -89,6 +88,7 @@ import {initFormattingReplacements} from './features/formatting.js';
 import {initCopyContent} from './features/copycontent.js';
 import {initCaptcha} from './features/captcha.js';
 import {initRepositoryActionView} from './components/RepoActionView.vue';
+import {initGlobalTooltips} from './modules/tippy.js';
 
 // Run time-critical code as soon as possible. This is safe to do because this
 // script appears at the end of <body> and rendered HTML is accessible at that point.
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 4872608ecd99f..27ce3518c400e 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -3,7 +3,7 @@ import tippy from 'tippy.js';
 export function createTippy(target, opts = {}) {
   const instance = tippy(target, {
     appendTo: document.body,
-    placement: target.getAttribute('data-placement') || 'top-start',
+    placement: 'top-start',
     animation: false,
     allowHTML: false,
     hideOnClick: false,
@@ -25,38 +25,108 @@ export function createTippy(target, opts = {}) {
   return instance;
 }
 
-export function initTooltip(el, props = {}) {
-  const content = el.getAttribute('data-content') || props.content;
+function getTippyTooltipContent(target) {
+  // prefer to always use the "[data-tooltip-content]" attribute
+  // for backward compatibility, we also support the ".tooltip[data-content]" attribute
+  let content = target.getAttribute('data-tooltip-content');
+  if (!content && target.classList.contains('tooltip')) {
+    content = target.getAttribute('data-content');
+  }
+  return content;
+}
+
+/**
+ * Attach a tippy tooltip to the given target element.
+ * If the target element already has a tippy tooltip attached, the tooltip will be updated with the new content.
+ * If the target element has no content, then no tooltip will be attached, and it returns null.
+ * @param target {HTMLElement}
+ * @param content {null|string}
+ * @returns {null|tippy}
+ */
+function attachTippyTooltip(target, content = null) {
+  content = content ?? getTippyTooltipContent(target);
   if (!content) return null;
-  if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', content);
-  return createTippy(el, {
+
+  const props = {
     content,
     delay: 100,
     role: 'tooltip',
-    ...(el.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
-    ...props,
-  });
-}
+    placement: target.getAttribute('data-tooltip-placement') || 'top-start',
+    ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
+  };
 
-export function showTemporaryTooltip(target, content) {
-  let tippy, oldContent;
-  if (target._tippy) {
-    tippy = target._tippy;
-    oldContent = tippy.props.content;
+  if (!target._tippy) {
+    createTippy(target, props);
   } else {
-    tippy = initTooltip(target, {content});
+    target._tippy.setProps(props);
+  }
+  return target._tippy;
+}
+
+/**
+ * creating tippy instance is expensive, so we only create it when the user hovers over the element
+ * @param e {Event}
+ */
+function lazyTippyOnMouseEnter(e) {
+  e.target.removeEventListener('mouseenter', lazyTippyOnMouseEnter, true);
+  attachTippyTooltip(this);
+}
+
+/**
+ * Activate the tippy tooltip for all children elements
+ * And if the element has no aria-label, use the tooltip content as aria-label
+ * @param target {HTMLElement}
+ */
+function attachChildrenLazyTippyTooltip(target) {
+  // the selector must match the logic in getTippyTooltipContent
+  for (const el of target.querySelectorAll('[data-tooltip-content], .tooltip[data-content]')) {
+    el.addEventListener('mouseenter', lazyTippyOnMouseEnter, true);
+
+    // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
+    if (!el.hasAttribute('aria-label')) {
+      const content = getTippyTooltipContent(el);
+      if (content) {
+        el.setAttribute('aria-label', content);
+      }
+    }
   }
+}
 
+export function initGlobalTooltips() {
+  // use MutationObserver to detect new elements added to the DOM, or attributes changed
+  const observer = new MutationObserver((mutationList) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === 'childList') {
+        for (const el of mutation.addedNodes) {
+          // handle all "tooltip" elements in newly added nodes, skip non-related nodes (eg: "#text")
+          if (el.querySelectorAll) {
+            attachChildrenLazyTippyTooltip(el);
+          }
+        }
+      } else if (mutation.type === 'attributes') {
+        // sync the tooltip content if the attributes change
+        attachTippyTooltip(mutation.target);
+      }
+    }
+  });
+  observer.observe(document, {
+    subtree: true,
+    childList: true,
+    attributeFilter: ['data-tooltip-content', 'data-content'],
+  });
+
+  attachChildrenLazyTippyTooltip(document.documentElement);
+}
+
+export function showTemporaryTooltip(target, content) {
+  const tippy = target._tippy ?? attachTippyTooltip(target, content);
   tippy.setContent(content);
   if (!tippy.state.isShown) tippy.show();
   tippy.setProps({
     onHidden: (tippy) => {
-      if (oldContent) {
-        tippy.setContent(oldContent);
-        tippy.setProps({onHidden: undefined});
-      } else {
+      // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
+      if (!attachTippyTooltip(target)) {
         tippy.destroy();
-        // after destroy, the `_tippy` is detached, it can't do "setProps (etc...)" anymore
       }
     },
   });

From 45981f5db563fe1a72a6c53e9e8a92d2a72659f7 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 20 Mar 2023 16:15:53 +0800
Subject: [PATCH 2/7] remove unnecessary "tooltip" class from DiffFileTreeItem

---
 web_src/js/components/DiffFileTreeItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index f0a3d909b9fc7..4084dee51d244 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="show" class="tooltip" :title="item.name">
+  <div v-show="show" :title="item.name">
     <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
     <div class="item" :class="item.isFile ? 'filewrapper gt-p-1' : ''">
       <!-- Files -->

From b0f056f44892d2ecbdf96b13cca0c9a44fee04e6 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 20 Mar 2023 17:45:53 +0800
Subject: [PATCH 3/7] remove non-general default value for placement

---
 web_src/js/features/contextpopup.js | 1 +
 web_src/js/modules/tippy.js         | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index 8e0ef92bd3ae8..c685d93db04a3 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -30,6 +30,7 @@ export function initContextPopups() {
 
     createTippy(this, {
       content: el,
+      placement: 'top-start',
       interactive: true,
       interactiveBorder: 5,
       onShow: () => {
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 27ce3518c400e..d2c9b5e4c710e 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -3,7 +3,6 @@ import tippy from 'tippy.js';
 export function createTippy(target, opts = {}) {
   const instance = tippy(target, {
     appendTo: document.body,
-    placement: 'top-start',
     animation: false,
     allowHTML: false,
     hideOnClick: false,

From 3e195a208fa5cc3dcc6b3714775cfeaf5f3358bb Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 20 Mar 2023 17:54:36 +0800
Subject: [PATCH 4/7] add comments, rename some names to clarify the relation
 between "tooltip" and "tippy"

---
 web_src/js/modules/tippy.js | 60 ++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index d2c9b5e4c710e..e651479a12791 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -24,26 +24,19 @@ export function createTippy(target, opts = {}) {
   return instance;
 }
 
-function getTippyTooltipContent(target) {
-  // prefer to always use the "[data-tooltip-content]" attribute
-  // for backward compatibility, we also support the ".tooltip[data-content]" attribute
-  let content = target.getAttribute('data-tooltip-content');
-  if (!content && target.classList.contains('tooltip')) {
-    content = target.getAttribute('data-content');
-  }
-  return content;
-}
-
 /**
- * Attach a tippy tooltip to the given target element.
- * If the target element already has a tippy tooltip attached, the tooltip will be updated with the new content.
+ * Attach a tooltip tippy to the given target element.
+ * If the target element already has a tooltip tippy attached, the tooltip will be updated with the new content.
  * If the target element has no content, then no tooltip will be attached, and it returns null.
+ *
+ * Note: "tooltip" doesn't equal to "tippy". "tooltip" means a auto-popup content, it just uses tippy as the implementation.
+ *
  * @param target {HTMLElement}
  * @param content {null|string}
  * @returns {null|tippy}
  */
-function attachTippyTooltip(target, content = null) {
-  content = content ?? getTippyTooltipContent(target);
+function attachTooltip(target, content = null) {
+  content = content ?? getTooltipContent(target);
   if (!content) return null;
 
   const props = {
@@ -63,27 +56,38 @@ function attachTippyTooltip(target, content = null) {
 }
 
 /**
- * creating tippy instance is expensive, so we only create it when the user hovers over the element
+ * creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
  * @param e {Event}
  */
-function lazyTippyOnMouseEnter(e) {
-  e.target.removeEventListener('mouseenter', lazyTippyOnMouseEnter, true);
-  attachTippyTooltip(this);
+function lazyTooltipOnMouseEnter(e) {
+  e.target.removeEventListener('mouseenter', lazyTooltipOnMouseEnter, true);
+  attachTooltip(this);
+}
+
+function getTooltipContent(target) {
+  // prefer to always use the "[data-tooltip-content]" attribute
+  // for backward compatibility, we also support the ".tooltip[data-content]" attribute
+  // in next PR, refactor all the ".tooltip[data-content]" to "[data-tooltip-content]"
+  let content = target.getAttribute('data-tooltip-content');
+  if (!content && target.classList.contains('tooltip')) {
+    content = target.getAttribute('data-content');
+  }
+  return content;
 }
 
 /**
- * Activate the tippy tooltip for all children elements
+ * Activate the tooltip for all children elements
  * And if the element has no aria-label, use the tooltip content as aria-label
  * @param target {HTMLElement}
  */
-function attachChildrenLazyTippyTooltip(target) {
+function attachChildrenLazyTooltip(target) {
   // the selector must match the logic in getTippyTooltipContent
   for (const el of target.querySelectorAll('[data-tooltip-content], .tooltip[data-content]')) {
-    el.addEventListener('mouseenter', lazyTippyOnMouseEnter, true);
+    el.addEventListener('mouseenter', lazyTooltipOnMouseEnter, true);
 
     // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
     if (!el.hasAttribute('aria-label')) {
-      const content = getTippyTooltipContent(el);
+      const content = getTooltipContent(el);
       if (content) {
         el.setAttribute('aria-label', content);
       }
@@ -97,14 +101,14 @@ export function initGlobalTooltips() {
     for (const mutation of mutationList) {
       if (mutation.type === 'childList') {
         for (const el of mutation.addedNodes) {
-          // handle all "tooltip" elements in newly added nodes, skip non-related nodes (eg: "#text")
+          // handle all "tooltip" elements in added nodes which have 'querySelectorAll' method, skip non-related nodes (eg: "#text")
           if (el.querySelectorAll) {
-            attachChildrenLazyTippyTooltip(el);
+            attachChildrenLazyTooltip(el);
           }
         }
       } else if (mutation.type === 'attributes') {
         // sync the tooltip content if the attributes change
-        attachTippyTooltip(mutation.target);
+        attachTooltip(mutation.target);
       }
     }
   });
@@ -114,17 +118,17 @@ export function initGlobalTooltips() {
     attributeFilter: ['data-tooltip-content', 'data-content'],
   });
 
-  attachChildrenLazyTippyTooltip(document.documentElement);
+  attachChildrenLazyTooltip(document.documentElement);
 }
 
 export function showTemporaryTooltip(target, content) {
-  const tippy = target._tippy ?? attachTippyTooltip(target, content);
+  const tippy = target._tippy ?? attachTooltip(target, content);
   tippy.setContent(content);
   if (!tippy.state.isShown) tippy.show();
   tippy.setProps({
     onHidden: (tippy) => {
       // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
-      if (!attachTippyTooltip(target)) {
+      if (!attachTooltip(target)) {
         tippy.destroy();
       }
     },

From 462257da264c735e99d6445d52c5f07172f36347 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 20 Mar 2023 21:31:53 +0800
Subject: [PATCH 5/7] upgrade vue3-calendar-heatmap to 2.0.2 with
 lazy-tippy-init

---
 package-lock.json | 12 ++++++------
 package.json      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ea3c539c91759..10d6baa23ef14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "vue": "3.2.47",
         "vue-bar-graph": "2.0.0",
         "vue-loader": "17.0.1",
-        "vue3-calendar-heatmap": "2.0.0",
+        "vue3-calendar-heatmap": "2.0.2",
         "webpack": "5.76.2",
         "webpack-cli": "5.0.1",
         "workbox-routing": "6.5.4",
@@ -9419,17 +9419,17 @@
       }
     },
     "node_modules/vue3-calendar-heatmap": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.0.tgz",
-      "integrity": "sha512-BchyC33WiZryYatFINj3LWqgyE6X82Huzf7abA23tsF/IbaRZVwZzie8SmGaYvezEBiPXhJogQ3dtxIuXFjkBw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.2.tgz",
+      "integrity": "sha512-ev0rNbOGhzX1YcNhFE0xSmJQUzK96wubBLdzaUKtKf0GhjYE8QAwzmWYcYrugolLgDj2vKzHQ/9gA3O9S26WOA==",
       "dependencies": {
         "tippy.js": "^6.3.7"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=16"
       },
       "peerDependencies": {
-        "vue": "^3.2.24"
+        "vue": "^3.2.29"
       }
     },
     "node_modules/w3c-xmlserializer": {
diff --git a/package.json b/package.json
index 9ff4ac27832ce..ea36b2f2dca5b 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "vue": "3.2.47",
     "vue-bar-graph": "2.0.0",
     "vue-loader": "17.0.1",
-    "vue3-calendar-heatmap": "2.0.0",
+    "vue3-calendar-heatmap": "2.0.2",
     "webpack": "5.76.2",
     "webpack-cli": "5.0.1",
     "workbox-routing": "6.5.4",

From b266575294f66c2843037285c8e829a20f8b8847 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 20 Mar 2023 23:27:22 +0800
Subject: [PATCH 6/7] use mouseover instead of mouseenter

---
 web_src/js/modules/tippy.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index e651479a12791..e7185e9bbe0c2 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -56,11 +56,14 @@ function attachTooltip(target, content = null) {
 }
 
 /**
- * creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
+ * Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
+ * According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event
+ * Some old browsers like Pale Moon doesn't support "mouseenter(capture)"
+ * The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
  * @param e {Event}
  */
-function lazyTooltipOnMouseEnter(e) {
-  e.target.removeEventListener('mouseenter', lazyTooltipOnMouseEnter, true);
+function lazyTooltipOnMouseHover(e) {
+  e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, true);
   attachTooltip(this);
 }
 
@@ -83,7 +86,7 @@ function getTooltipContent(target) {
 function attachChildrenLazyTooltip(target) {
   // the selector must match the logic in getTippyTooltipContent
   for (const el of target.querySelectorAll('[data-tooltip-content], .tooltip[data-content]')) {
-    el.addEventListener('mouseenter', lazyTooltipOnMouseEnter, true);
+    el.addEventListener('mouseover', lazyTooltipOnMouseHover, true);
 
     // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
     if (!el.hasAttribute('aria-label')) {

From ba8ad89e5148e89dddb0789a4dac6f380197cb83 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 21 Mar 2023 00:42:32 +0800
Subject: [PATCH 7/7] use: 'querySelectorAll' in el

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

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index e7185e9bbe0c2..98d0ff84b6062 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -103,9 +103,10 @@ export function initGlobalTooltips() {
   const observer = new MutationObserver((mutationList) => {
     for (const mutation of mutationList) {
       if (mutation.type === 'childList') {
+        // mainly for Vue components and AJAX rendered elements
         for (const el of mutation.addedNodes) {
           // handle all "tooltip" elements in added nodes which have 'querySelectorAll' method, skip non-related nodes (eg: "#text")
-          if (el.querySelectorAll) {
+          if ('querySelectorAll' in el) {
             attachChildrenLazyTooltip(el);
           }
         }