mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-16 14:40:12 +01:00
🎨 Improve hyperlink tooltip (#16596)
This commit is contained in:
parent
420dc79830
commit
db4fb41024
2 changed files with 23 additions and 21 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue