diff --git a/package-lock.json b/package-lock.json
index 353e0ab655..2f277f180f 100644
--- a/package-lock.json
+++ b/package-lock.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",
@@ -9425,17 +9425,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 db7cf1154b..e5f346f207 100644
--- a/package.json
+++ b/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",
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index cef1e3a02e..fb7c77f4eb 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/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>
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 5c1688d019..adb1e3079f 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}}> </div>
+ <div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}}> </div>
{{end}}
</a>
{{end}}
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 075af65af3..a97cfb02ba 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 32919156b8..86444f2b21 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/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index f0a3d909b9..4084dee51d 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 -->
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 113ff2e1f1..d533877c27 100644
--- a/web_src/js/features/common-global.js
+++ b/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')) {
diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index 8e0ef92bd3..c685d93db0 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/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 56ebe4fc99..458f11c6f2 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 e49b1b2726..767f071151 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 7d74ee6b94..84ffe8e5db 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';
@@ -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.
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 4872608ecd..98d0ff84b6 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: 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} : {}),
+ };
+
+ if (!target._tippy) {
+ createTippy(target, props);
+ } else {
+ 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) {
- let tippy, oldContent;
- if (target._tippy) {
- tippy = target._tippy;
- oldContent = tippy.props.content;
- } else {
- tippy = initTooltip(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
}
},
});