自定义文件树提示框样式

本贴最后更新于 628 天前,其中的信息可能已经物是人非

思源的文件树提示样式是采用原生的,提示信息对我来说用处不大,且字很小,经过魔改,呈现以下效果

image.png

另外,搜索框也增加了提示信息:

image.png

魔改代码如下,可自行根据需要修改:

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;
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    20648 引用 • 80710 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • xml2008 1
    作者

    改进后的代码,鼠标移到关键字上才会显示

    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";
        }
    }
    
  • 其他回帖
  • 好像部分效果还是有点问题,比如搜索中,要是没有选中对应的高亮,就显示不对。

    image.png

    2 回复
  • xml2008
    作者

    参考这个帖子 【 代码片段】啊哈哈哈代码来咯 ~~ 那你们先吃我就不打扰了哈 ~~


    或者:

    将代码添加到可以自动加载 js 文件里,例如 themm.js

    后面的 css 代码添加到 theme.css 文件里

  • 15710886610

    老哥怎么实现,你的功能好像很棒,代码加到哪里不会操作能再详细教一下么

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    54 引用 • 85 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 102 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 1 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    546 引用 • 3531 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 166 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1056 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 613 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 908 回帖 • 221 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 274 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    20648 引用 • 80709 回帖 • 2 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    106 引用 • 152 回帖 • 3 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 351 关注
  • 创业

    你比 99% 的人都优秀么?

    83 引用 • 1398 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 468 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 48 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 10 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 614 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 11 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 103 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 2 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 334 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    942 引用 • 1459 回帖 • 96 关注