🎨 Improve hyperlink tooltip (#16596)

This commit is contained in:
Jeffrey Chen 2025-12-16 10:53:10 +08:00 committed by GitHub
parent 420dc79830
commit db4fb41024
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 21 deletions

View file

@ -80,10 +80,12 @@ export const initBlockPopover = (app: App) => {
tip = childElement.textContent; tip = childElement.textContent;
} }
} }
let tooltipSpace: number | undefined;
if (!tip) { if (!tip) {
tip = escapeHtml(aElement.getAttribute("data-inline-memo-content")); tip = escapeHtml(aElement.getAttribute("data-inline-memo-content"));
if (tip) { if (tip) {
tooltipClass = "memo"; // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161 tooltipClass = "memo"; // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
tooltipSpace = 0; // tooltip 和备注元素之间不能有空隙 https://github.com/siyuan-note/siyuan/issues/14796#issuecomment-3649757267
} }
} }
if (!tip) { if (!tip) {
@ -132,10 +134,10 @@ export const initBlockPopover = (app: App) => {
if (tip && !aElement.classList.contains("b3-tooltips")) { if (tip && !aElement.classList.contains("b3-tooltips")) {
// https://github.com/siyuan-note/siyuan/issues/11294 // https://github.com/siyuan-note/siyuan/issues/11294
try { try {
showTooltip(decodeURIComponent(tip), aElement, tooltipClass, event); showTooltip(decodeURIComponent(tip), aElement, tooltipClass, event, tooltipSpace);
} catch (e) { } catch (e) {
// https://ld246.com/article/1718235737991 // https://ld246.com/article/1718235737991
showTooltip(tip, aElement, tooltipClass, event); showTooltip(tip, aElement, tooltipClass, event, tooltipSpace);
} }
event.stopPropagation(); event.stopPropagation();
} else { } else {

View file

@ -1,23 +1,24 @@
import {isMobile} from "../util/functions"; import {isMobile} from "../util/functions";
export const showTooltip = (message: string, target: Element, tooltipClass?: string, event?: MouseEvent) => { export const showTooltip = (message: string, target: Element, tooltipClass?: string, event?: MouseEvent, space: number = 0.5) => {
if (isMobile()) { if (isMobile()) {
return; return;
} }
let targetRect = target.getBoundingClientRect(); let targetRect = target.getBoundingClientRect();
let space = 0.5; // 跨行元素
if (target.getAttribute("data-inline-memo-content")) { const clientRects = target.getClientRects();
space = 0; if (clientRects.length > 1) {
if (target.getClientRects().length > 1) {
let lastWidth = 0;
if (event) { if (event) {
Array.from(target.getClientRects()).forEach(item => { // 选择包含鼠标的矩形
Array.from(clientRects).forEach(item => {
if (event.clientY >= item.top - 3 && event.clientY <= item.bottom) { if (event.clientY >= item.top - 3 && event.clientY <= item.bottom) {
targetRect = item; targetRect = item;
} }
}); });
} else { } else {
Array.from(target.getClientRects()).forEach(item => { // 选择宽度最大的矩形
let lastWidth = 0;
Array.from(clientRects).forEach(item => {
if (item.width > lastWidth) { if (item.width > lastWidth) {
targetRect = item; targetRect = item;
} }
@ -25,7 +26,6 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
}); });
} }
} }
}
if (targetRect.height === 0 || !message) { if (targetRect.height === 0 || !message) {
hideTooltip(); hideTooltip();
return; return;