web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Use data-tooltip-content for tippy tooltip (#23649)

Browse source 
Follow:
* #23574
* Remove all ".tooltip[data-content=...]"

Major changes:

* Remove "tooltip" class, use "[data-tooltip-content=...]" instead of
".tooltip[data-content=...]"
* Remove legacy `data-position`, it's dead code since last Fomantic
Tooltip -> Tippy Tooltip refactoring
* Rename reaction attribute from `data-content` to
`data-reaction-content`
* Add comments for some `data-content`: `{{/* used by the form */}}`
* Remove empty "ui" class
* Use "text color" for SVG icons (a few)
This commit is contained in:
wxiaoguang 2023-03-24 18:35:38 +08:00 • committed by GitHub
parent 87f0f7e670
commit 8d5fbeb7a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
77 changed files with 209 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web_src/js/modules/aria/dropdown.js
View file

@ -102,8 +102,9 @@ function attachStaticElements($dropdown, $focusable, $menu) {
});
// use tooltip's content as aria-label if there is no aria-label
if ($dropdown.hasClass('tooltip') && $dropdown.attr('data-content') && !$dropdown.attr('aria-label')) {
$dropdown.attr('aria-label', $dropdown.attr('data-content'));
const tooltipContent = $dropdown.attr('data-tooltip-content');
if (tooltipContent && !$dropdown.attr('aria-label')) {
$dropdown.attr('aria-label', tooltipContent);
}
}

20
web_src/js/modules/tippy.js
View file

@ -36,7 +36,7 @@ export function createTippy(target, opts = {}) {
* @returns {null|tippy}
*/
function attachTooltip(target, content = null) {
content = content ?? getTooltipContent(target);
content = content ?? target.getAttribute('data-tooltip-content');
if (!content) return null;
const props = {
@ -67,30 +67,18 @@ function lazyTooltipOnMouseHover(e) {
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]')) {
for (const el of target.querySelectorAll('[data-tooltip-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);
const content = target.getAttribute('data-tooltip-content');
if (content) {
el.setAttribute('aria-label', content);
}
@ -119,7 +107,7 @@ export function initGlobalTooltips() {
observer.observe(document, {
subtree: true,
childList: true,
attributeFilter: ['data-tooltip-content', 'data-content'],
attributeFilter: ['data-tooltip-content'],
});
attachChildrenLazyTooltip(document.documentElement);