2022-07-19 06:33:34 +08:00
|
|
|
import tippy from 'tippy.js';
|
|
|
|
|
2023-05-11 13:40:54 +08:00
|
|
|
const visibleInstances = new Set();
|
|
|
|
|
2022-08-09 20:37:34 +08:00
|
|
|
export function createTippy(target, opts = {}) {
|
2023-06-14 16:01:37 +08:00
|
|
|
const {role, content, onHide: optsOnHide, onDestroy: optsOnDestroy, onShow: optOnShow} = opts;
|
|
|
|
delete opts.onHide;
|
|
|
|
delete opts.onDestroy;
|
|
|
|
delete opts.onShow;
|
|
|
|
|
2022-08-09 20:37:34 +08:00
|
|
|
const instance = tippy(target, {
|
2022-07-19 06:33:34 +08:00
|
|
|
appendTo: document.body,
|
|
|
|
animation: false,
|
2022-08-24 04:17:42 +08:00
|
|
|
allowHTML: false,
|
2022-12-26 01:17:48 +08:00
|
|
|
hideOnClick: false,
|
2023-04-11 07:01:20 +08:00
|
|
|
interactiveBorder: 20,
|
2022-09-10 05:03:18 +08:00
|
|
|
ignoreAttributes: true,
|
2022-08-09 20:37:34 +08:00
|
|
|
maxWidth: 500, // increase over default 350px
|
2023-05-11 13:40:54 +08:00
|
|
|
onHide: (instance) => {
|
|
|
|
visibleInstances.delete(instance);
|
2023-06-14 16:01:37 +08:00
|
|
|
return optsOnHide?.(instance);
|
2023-05-11 13:40:54 +08:00
|
|
|
},
|
|
|
|
onDestroy: (instance) => {
|
|
|
|
visibleInstances.delete(instance);
|
2023-06-14 16:01:37 +08:00
|
|
|
return optsOnDestroy?.(instance);
|
2023-05-11 13:40:54 +08:00
|
|
|
},
|
|
|
|
onShow: (instance) => {
|
2023-05-13 00:58:55 +08:00
|
|
|
// hide other tooltip instances so only one tooltip shows at a time
|
2023-05-11 13:40:54 +08:00
|
|
|
for (const visibleInstance of visibleInstances) {
|
2023-05-20 04:12:30 +08:00
|
|
|
if (visibleInstance.props.role === 'tooltip') {
|
2023-05-13 00:58:55 +08:00
|
|
|
visibleInstance.hide();
|
|
|
|
}
|
2023-05-11 13:40:54 +08:00
|
|
|
}
|
|
|
|
visibleInstances.add(instance);
|
2023-06-14 16:01:37 +08:00
|
|
|
return optOnShow?.(instance);
|
2023-05-11 13:40:54 +08:00
|
|
|
},
|
2022-07-19 06:33:34 +08:00
|
|
|
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>`,
|
2023-06-09 17:10:51 +08:00
|
|
|
role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
|
2023-06-14 16:01:37 +08:00
|
|
|
theme: role || 'menu', // CSS theme, we support either "tooltip" or "menu"
|
2022-07-19 06:33:34 +08:00
|
|
|
...opts,
|
|
|
|
});
|
2022-08-09 20:37:34 +08:00
|
|
|
|
2022-08-10 22:47:28 +08:00
|
|
|
// for popups where content refers to a DOM element, we use the 'tippy-target' class
|
|
|
|
// to initially hide the content, now we can remove it as the content has been removed
|
|
|
|
// from the DOM by tippy
|
2023-06-14 16:01:37 +08:00
|
|
|
if (content instanceof Element) {
|
|
|
|
content.classList.remove('tippy-target');
|
2022-08-09 20:37:34 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
return instance;
|
|
|
|
}
|
|
|
|
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
/**
|
|
|
|
* 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) {
|
2023-04-11 07:01:20 +08:00
|
|
|
switchTitleToTooltip(target);
|
|
|
|
|
2023-03-24 18:35:38 +08:00
|
|
|
content = content ?? target.getAttribute('data-tooltip-content');
|
2022-08-09 20:37:34 +08:00
|
|
|
if (!content) return null;
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
|
2023-05-28 09:34:18 +08:00
|
|
|
// when element has a clipboard target, we update the tooltip after copy
|
|
|
|
// in which case it is undesirable to automatically hide it on click as
|
|
|
|
// it would momentarily flash the tooltip out and in.
|
|
|
|
const hasClipboardTarget = target.hasAttribute('data-clipboard-target');
|
|
|
|
const hideOnClick = !hasClipboardTarget;
|
|
|
|
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
const props = {
|
2022-08-09 20:37:34 +08:00
|
|
|
content,
|
|
|
|
delay: 100,
|
|
|
|
role: 'tooltip',
|
2023-06-09 17:10:51 +08:00
|
|
|
theme: 'tooltip',
|
2023-05-28 09:34:18 +08:00
|
|
|
hideOnClick,
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
placement: target.getAttribute('data-tooltip-placement') || 'top-start',
|
2023-03-24 17:43:52 +08:00
|
|
|
...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
};
|
2022-08-09 20:37:34 +08:00
|
|
|
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
if (!target._tippy) {
|
|
|
|
createTippy(target, props);
|
2022-08-09 20:37:34 +08:00
|
|
|
} else {
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
target._tippy.setProps(props);
|
|
|
|
}
|
|
|
|
return target._tippy;
|
|
|
|
}
|
|
|
|
|
2023-04-11 07:01:20 +08:00
|
|
|
function switchTitleToTooltip(target) {
|
|
|
|
const title = target.getAttribute('title');
|
|
|
|
if (title) {
|
|
|
|
target.setAttribute('data-tooltip-content', title);
|
|
|
|
target.setAttribute('aria-label', title);
|
|
|
|
// keep the attribute, in case there are some other "[title]" selectors
|
|
|
|
// and to prevent infinite loop with <relative-time> which will re-add
|
|
|
|
// title if it is absent
|
|
|
|
target.setAttribute('title', '');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
/**
|
|
|
|
* 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);
|
|
|
|
}
|
|
|
|
|
2023-04-11 07:01:20 +08:00
|
|
|
// Activate the tooltip for current element.
|
|
|
|
// If the element has no aria-label, use the tooltip content as aria-label.
|
|
|
|
function attachLazyTooltip(el) {
|
|
|
|
el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true});
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
|
2023-04-11 07:01:20 +08:00
|
|
|
// meanwhile, if the element has no aria-label, use the tooltip content as aria-label
|
|
|
|
if (!el.hasAttribute('aria-label')) {
|
|
|
|
const content = el.getAttribute('data-tooltip-content');
|
|
|
|
if (content) {
|
|
|
|
el.setAttribute('aria-label', content);
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
}
|
2022-08-09 20:37:34 +08:00
|
|
|
}
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
}
|
2022-08-09 20:37:34 +08:00
|
|
|
|
2023-04-11 07:01:20 +08:00
|
|
|
// Activate the tooltip for all children elements.
|
|
|
|
function attachChildrenLazyTooltip(target) {
|
|
|
|
for (const el of target.querySelectorAll('[data-tooltip-content]')) {
|
|
|
|
attachLazyTooltip(el);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const elementNodeTypes = new Set([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE]);
|
|
|
|
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
export function initGlobalTooltips() {
|
2023-04-11 07:01:20 +08:00
|
|
|
// use MutationObserver to detect new "data-tooltip-content" elements added to the DOM, or attributes changed
|
|
|
|
const observerConnect = (observer) => observer.observe(document, {
|
|
|
|
subtree: true,
|
|
|
|
childList: true,
|
|
|
|
attributeFilter: ['data-tooltip-content', 'title']
|
|
|
|
});
|
|
|
|
const observer = new MutationObserver((mutationList, observer) => {
|
|
|
|
const pending = observer.takeRecords();
|
|
|
|
observer.disconnect();
|
|
|
|
for (const mutation of [...mutationList, ...pending]) {
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
if (mutation.type === 'childList') {
|
|
|
|
// mainly for Vue components and AJAX rendered elements
|
|
|
|
for (const el of mutation.addedNodes) {
|
2023-04-11 07:01:20 +08:00
|
|
|
if (elementNodeTypes.has(el.nodeType)) {
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
attachChildrenLazyTooltip(el);
|
2023-04-11 07:01:20 +08:00
|
|
|
if (el.hasAttribute('data-tooltip-content')) {
|
|
|
|
attachLazyTooltip(el);
|
|
|
|
}
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (mutation.type === 'attributes') {
|
|
|
|
attachTooltip(mutation.target);
|
|
|
|
}
|
|
|
|
}
|
2023-04-11 07:01:20 +08:00
|
|
|
observerConnect(observer);
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
});
|
2023-04-11 07:01:20 +08:00
|
|
|
observerConnect(observer);
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
|
|
|
|
attachChildrenLazyTooltip(document.documentElement);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function showTemporaryTooltip(target, content) {
|
|
|
|
const tippy = target._tippy ?? attachTooltip(target, content);
|
2022-08-09 20:37:34 +08:00
|
|
|
tippy.setContent(content);
|
2022-12-26 01:17:48 +08:00
|
|
|
if (!tippy.state.isShown) tippy.show();
|
2022-08-09 20:37:34 +08:00
|
|
|
tippy.setProps({
|
|
|
|
onHidden: (tippy) => {
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
|
|
|
// reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
|
|
|
|
if (!attachTooltip(target)) {
|
2022-08-09 20:37:34 +08:00
|
|
|
tippy.destroy();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
2022-07-19 06:33:34 +08:00
|
|
|
}
|