🎨 Improve hyperlink tooltip

This commit is contained in:
Jeffrey Chen 2025-12-16 09:40:55 +08:00
parent 979cb54766
commit aa38bb1500
2 changed files with 23 additions and 21 deletions

View file

@ -80,10 +80,12 @@ export const initBlockPopover = (app: App) => {
tip = childElement.textContent;
}
}
let tooltipSpace: number | undefined;
if (!tip) {
tip = escapeHtml(aElement.getAttribute("data-inline-memo-content"));
if (tip) {
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) {
@ -132,10 +134,10 @@ export const initBlockPopover = (app: App) => {
if (tip && !aElement.classList.contains("b3-tooltips")) {
// https://github.com/siyuan-note/siyuan/issues/11294
try {
showTooltip(decodeURIComponent(tip), aElement, tooltipClass, event);
showTooltip(decodeURIComponent(tip), aElement, tooltipClass, event, tooltipSpace);
} catch (e) {
// https://ld246.com/article/1718235737991
showTooltip(tip, aElement, tooltipClass, event);
showTooltip(tip, aElement, tooltipClass, event, tooltipSpace);
}
event.stopPropagation();
} else {

View file

@ -1,29 +1,29 @@
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()) {
return;
}
let targetRect = target.getBoundingClientRect();
let space = 0.5;
if (target.getAttribute("data-inline-memo-content")) {
space = 0;
if (target.getClientRects().length > 1) {
// 跨行元素
const clientRects = target.getClientRects();
if (clientRects.length > 1) {
if (event) {
// 选择包含鼠标的矩形
Array.from(clientRects).forEach(item => {
if (event.clientY >= item.top - 3 && event.clientY <= item.bottom) {
targetRect = item;
}
});
} else {
// 选择宽度最大的矩形
let lastWidth = 0;
if (event) {
Array.from(target.getClientRects()).forEach(item => {
if (event.clientY >= item.top - 3 && event.clientY <= item.bottom) {
targetRect = item;
}
});
} else {
Array.from(target.getClientRects()).forEach(item => {
if (item.width > lastWidth) {
targetRect = item;
}
lastWidth = item.width;
});
}
Array.from(clientRects).forEach(item => {
if (item.width > lastWidth) {
targetRect = item;
}
lastWidth = item.width;
});
}
}
if (targetRect.height === 0 || !message) {