-
自定义文件树提示框样式
2022-12-22 18:21改进后的代码,鼠标移到关键字上才会显示
var oldTitle = null; //判断是否有title属性 var cls = null; //用于判断是否需要弹出提示框 var txt = null; document.addEventListener('mouseover', function(event) { let f1 = event.target.parentNode; //一级父节点 let f2 = event.target.parentNode.parentNode; //二级父节点 let f1class=f1.getAttribute("class"); let m = event.target //自身 txt = "" // console.log(m.tagName); if (m.tagName == "MARK" && f1class.indexOf("b3-list-item" != -1)) { txt = f1.innerHTML } else if (m.tagName == "SPAN" && f1class!=null && f1class.indexOf("b3-list-item" != -1)) { let title = f1.getAttribute("title"); if (title !== null) { oldTitle = title; f1.title = ""; let txts = title.split("\n"); txt = txts[0]; if (txts.length > 1 && txts[1].indexOf("命名") !== -1) { txt = txts[1].replace("命名 ", ""); //如果命名里包含 | 则换行显示 空格会被忽略 txts = txt.split("|"); if (txts.length > 1) { txt = "" for (let index = 0; index < txts.length; index++) { txt += "<p style='border-bottom: 1px dashed rgb(6, 196, 209);'>" + txts[index] + "</p>"; } } } } } setTimeout(function() { swsshowTooltip(txt, m); }, 0); }) document.addEventListener('mouseout', function(event) { if (oldTitle !== null) { event.target.parentNode.title = oldTitle; oldTitle = null; } swshideTooltip(); }) function swsshowTooltip(message, target) { const targetRect = target.getBoundingClientRect(); if (targetRect.height === 0 || !message) { swshideTooltip(); return; } let messageElement = document.getElementById("swstooltip"); if (!messageElement) { document.body.insertAdjacentHTML("beforeend", `<div class="tooltip" id="swstooltip">${message}</div>`); messageElement = document.getElementById("swstooltip"); } else { messageElement.innerHTML = message; } if (target.getAttribute("data-inline-memo-content")) { messageElement.classList.add("tooltip--memo"); // class https://github.com/siyuan-note/siyuan/issues/6161 } let left = targetRect.left; const position = target.getAttribute("data-position"); if (position === "right") { left = targetRect.right - messageElement.clientWidth; } else if (position === "center") { left = targetRect.left + (targetRect.width - messageElement.clientWidth) / 2; } swssetPosition(messageElement, left, targetRect.top + targetRect.height + 8, targetRect.height * 2 + 8); }; function swshideTooltip() { const messageElement = document.getElementById("swstooltip"); if (messageElement) { messageElement.remove(); } }; function swssetPosition(element, x, y, targetHeight = 0, targetLeft = 0) { element.style.top = y + "px"; element.style.left = x + "px"; const rect = element.getBoundingClientRect(); // windows 下悬浮菜单在 drag 位置时无法点击 let dragBarHeight = 0; /// #if !BROWSER dragBarHeight = document.getElementById("drag").clientHeight; /// #endif // 上下超出屏幕 if (rect.bottom > window.innerHeight || rect.top < dragBarHeight) { const top = y - rect.height - targetHeight; if (top > dragBarHeight && (top + rect.height) < window.innerHeight - dragBarHeight) { // 上部 element.style.top = top + "px"; } else if (top <= dragBarHeight) { // 位置超越到屏幕上方外时,需移动到屏幕顶部。eg:光标在第一个块,然后滚动到上方看不见的位置,按 ctrl+a element.style.top = dragBarHeight + "px"; } } if (rect.right > window.innerWidth) { // 展现在左侧 element.style.left = `${window.innerWidth - rect.width - targetLeft}px`; } else if (rect.left < 0) { // 依旧展现在左侧,只是位置右移 element.style.left = "0"; } }
-
自定义文件树提示框样式
2022-12-06 12:29