Use a general approach to show tooltip, fix temporary tooltip bug #23574
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,7 +3,7 @@ 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, | ||
|
|
@@ -25,38 +25,108 @@ 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. | ||
| * 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; | ||
|
|
||
| const props = { | ||
| content, | ||
| delay: 100, | ||
| role: 'tooltip', | ||
| 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 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) { | ||
|
There was a problem hiding this comment. Not broken, just a quick check to see the "node" has Otherwise some nodes (like I agree that there would be other approaches to check if the node is non-#text, at the moment, this quick check is clear and fast IMO. There was a problem hiding this comment. Use node.nodeType please, it's much more clear. There was a problem hiding this comment. Can you provide a list for the types? There was a problem hiding this comment. Should be There was a problem hiding this comment. But that's slower than the There was a problem hiding this comment. Alternatively There was a problem hiding this comment. OK, then |
||
| 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) => { | ||
| // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed | ||
| if (!attachTippyTooltip(target)) { | ||
| tippy.destroy(); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.