Use a general approach to show tooltip, fix temporary tooltip bug

package.json

@@ -43,7 +43,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",

templates/repo/issue/view_content/sidebar.tmpl

@@ -661,9 +661,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>

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}}

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();

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);
   },

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 -->

web_src/js/features/common-global.js

@@ -5,7 +5,6 @@ import {createDropzone} from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.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';
 
@@ -66,12 +65,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')) {

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: () => {

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');

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');

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';
@@ -91,6 +90,7 @@ import {initCaptcha} from './features/captcha.js';
 import {initRepositoryActionView} from './components/RepoActionView.vue';
 import {initAriaCheckboxPatch} from './modules/aria/checkbox.js';
 import {initAriaDropdownPatch} from './modules/aria/dropdown.js';
+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.

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: target.getAttribute('data-placement') || 'top-start',
     animation: false,
     allowHTML: false,
     hideOnClick: false,
@@ -25,38 +24,116 @@ export function createTippy(target, opts = {}) {
   return instance;
 }
 
-export function initTooltip(el, props = {}) {
-  const content = el.getAttribute('data-content') || props.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 attachTooltip(target, content = null) {
+  content = content ?? getTooltipContent(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 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 lazyTooltipOnMouseHover(e) {
+  e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, 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 tooltip for all children elements
+ * And if the element has no aria-label, use the tooltip content as aria-label
+ * @param target {HTMLElement}
+ */
+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('mouseover', lazyTooltipOnMouseHover, true);
+
+    // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
+    if (!el.hasAttribute('aria-label')) {
+      const content = getTooltipContent(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') {
+        // 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 ('querySelectorAll' in el) {
+            attachChildrenLazyTooltip(el);
+          }
+        }
+      } else if (mutation.type === 'attributes') {
+        // sync the tooltip content if the attributes change
+        attachTooltip(mutation.target);
+      }
+    }
+  });
+  observer.observe(document, {
+    subtree: true,
+    childList: true,
+    attributeFilter: ['data-tooltip-content', 'data-content'],
+  });
+
+  attachChildrenLazyTooltip(document.documentElement);
+}
+
+export function showTemporaryTooltip(target, content) {
+  const tippy = target._tippy ?? attachTooltip(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 (!attachTooltip(target)) {
         tippy.destroy();
-        // after destroy, the `_tippy` is detached, it can't do "setProps (etc...)" anymore
       }
     },
   });