自定义文件树提示框样式

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

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

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

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

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

    22336 引用 • 89376 回帖

相关帖子

欢迎来到这里!

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

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

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


    或者:

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

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

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

    image.png

    2 回复
  • 查看全部回帖

推荐标签 标签

  • RYMCU

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

    4 引用 • 6 回帖 • 51 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖 • 1 关注
  • 开源

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

    408 引用 • 3574 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • abitmean

    有点意思就行了

    29 关注
  • C

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

    85 引用 • 165 回帖 • 2 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 488 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • VirtualBox

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

    10 引用 • 2 回帖 • 6 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 47 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 510 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • TensorFlow

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

    20 引用 • 19 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 5 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 73 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 670 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • 服务

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

    41 引用 • 24 回帖 • 2 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 4 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 1 关注