思源的文件树提示样式是采用原生的,提示信息对我来说用处不大,且字很小,经过魔改,呈现以下效果
另外,搜索框也增加了提示信息:
魔改代码如下,可自行根据需要修改:
var oldTitle = null; //判断是否有title属性
var cls=null; //用于判断是否需要弹出提示框
var txt=null;
document.addEventListener('mouseover', function (event) {
let e = event.target.parentNode;
let cls = e.getAttribute("class");
if(null==cls) return;
// console.log(cls);
if(cls.indexOf("b3-list-item") != -1){
txt=e.innerHTML;
}else{
return;
}
let title = e.getAttribute("title");
console.log(title);
oldTitle=title;
if (title !== null) {
e.title="";
let txts=title.split("\n");
txt=txts[0];
if (txts.length>1 && txts[1].indexOf("命名")!==-1){
txt=txts[1].replace("命名 ","");
}
}
setTimeout(function () {
swsshowTooltip(txt, e);
}, 0);
})
document.addEventListener('mouseout', function (event) {
if(oldTitle !== null){
event.target.parentNode.title=oldTitle;
}
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";
}
}
.tooltip,
.swstooltip {
color: rgb(219, 215, 214);
background-color: #055687;
font-size: 18px;
line-height: 200%;
border:2px solid rgb(5, 160, 244);
max-width: 520px;
}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于