自定义文件树提示框样式

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

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

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

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

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

    20644 引用 • 80672 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 好像部分效果还是有点问题,比如搜索中,要是没有选中对应的高亮,就显示不对。

    image.png

    2 回复
  • 其他回帖
  • 15710886610

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

    1 回复
  • 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";
        }
    }
    
  • xml2008
    作者

    是的,鼠标移到高亮文字上才会完整显示。我的水平只能做到这样,有兴趣你可以改进一下 😄

  • 查看全部回帖

推荐标签 标签

  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 429 回帖 • 5 关注
  • Netty

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

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

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

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

    20643 引用 • 80672 回帖 • 1 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 371 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 45 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    14 引用 • 7 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 621 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 3 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    405 引用 • 3557 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 590 关注
  • 禅道

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

    6 引用 • 15 回帖 • 169 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 8 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 606 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 125 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖 • 2 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 444 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 3 关注
  • danl
    98 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 616 关注
  • 分享

    有什么新发现就分享给大家吧!

    246 引用 • 1780 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 42 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 617 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    5 引用 • 62 回帖 • 10 关注