自定义文件树提示框样式

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

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

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

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

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

    18131 引用 • 66889 回帖

相关帖子

欢迎来到这里!

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

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

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

  • 其他回帖
  • 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 回复
  • 15710886610

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

    1 回复
  • 查看全部回帖

推荐标签 标签

  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 506 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 120 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖 • 1 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 3 关注
  • TextBundle

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

    1 引用 • 2 回帖 • 45 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 39 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 3 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 17 关注
  • PHP

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

    164 引用 • 406 回帖 • 524 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 612 回帖
  • Bug

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

    76 引用 • 1738 回帖 • 3 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 166 关注
  • Wide

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

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

    30 引用 • 218 回帖 • 594 关注
  • gRpc
    10 引用 • 8 回帖 • 48 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • Vim

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

    27 引用 • 66 回帖 • 1 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 518 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    129 引用 • 791 回帖 • 1 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 674 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 457 关注
  • 持续集成

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

    14 引用 • 7 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 21 关注
  • HTML

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

    103 引用 • 294 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 496 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    37 引用 • 24 回帖 • 1 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 34 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1090 引用 • 3467 回帖 • 297 关注