锚文本链接为空时 tooltip 显示为 null 的问题

现象描述

当前版本似乎锚文本链接属性为空时,指针移到锚文本上会显示 null

PixPin20250309114424.png

PixPin20250309114504.png

尝试用 css 代码片段处理,但是该内容时单纯的文本节点,貌似纯 css 无法处理该情况

PixPin20250309114539.png

PixPin20250309114839.png

当前行为用于利用 html 的 title 属性来为文本做简单的注释,虽然创建无链接属性的锚文本用于注释可能不太常见,但光标移入时显示 null 可能还是不太合适(对于非开发者来说)

  • 思源笔记

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

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

    26197 引用 • 108832 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10066 引用 • 45732 回帖 • 67 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • xqh042

    用 ai 缝了个脚本移除 tooltip 的文本内容实现隐藏 null,作为一个临时方案凑合用(

    效果如图,移除了 null 文本和设置了高度避免被鼠标遮挡:

    PixPin20250309124306.png

    (function() { // 处理 tooltip 的函数 function handleTooltip(tooltipElement) { if (!tooltipElement) return; // 检查 tooltip 是否包含 .fn__hr 元素 const hrElement = tooltipElement.querySelector('.fn__hr'); if (!hrElement) return; // 获取 .fn__hr 的前一个节点 const previousNode = hrElement.previousSibling; if (!previousNode) return; // 如果前一个节点不是 span 元素(即为文本节点或其他非 span 元素) if (previousNode.nodeName !== 'SPAN') { // 清空 tooltip 的文本内容,保留 .fn__hr 后面的内容 while (tooltipElement.firstChild && tooltipElement.firstChild !== hrElement) { tooltipElement.removeChild(tooltipElement.firstChild); } // 移除 .fn__hr 节点本身 if (hrElement.parentNode === tooltipElement) { tooltipElement.removeChild(hrElement); } // 调整 tooltip 位置,向下偏移一些以避免被光标遮挡 // 获取当前的 top 值 const currentTop = parseInt(tooltipElement.style.top, 10) || 0; // 设置新的 top 值,向下偏移 15 像素(可根据需要调整) tooltipElement.style.top = (currentTop + 15) + 'px'; } } // 使用 MutationObserver 监听 DOM 变化 function observeTooltips() { const observer = new MutationObserver(mutations => { let tooltipFound = false; let tooltipElement = null; mutations.forEach(mutation => { // 检查添加的节点 if (mutation.addedNodes.length) { // 遍历添加的节点 mutation.addedNodes.forEach(node => { // 检查是否是 #tooltip 或者包含 #tooltip if (node.id === 'tooltip') { tooltipFound = true; tooltipElement = node; } else if (node.nodeType === 1) { // 元素节点 const tooltip = node.querySelector('#tooltip'); if (tooltip) { tooltipFound = true; tooltipElement = tooltip; } } }); } // 检查修改的节点 if (mutation.target.id === 'tooltip') { tooltipFound = true; tooltipElement = mutation.target; } else { const tooltip = mutation.target.querySelector('#tooltip'); if (tooltip) { tooltipFound = true; tooltipElement = tooltip; } } }); // 如果找到了 tooltip 元素,处理它 if (tooltipFound && tooltipElement) { // 使用 setTimeout 稍微延迟处理,确保 tooltip 内容已完全加载 setTimeout(() => { handleTooltip(tooltipElement); }, 0); } }); // 配置观察器 const config = { childList: true, // 观察子节点的添加或删除 subtree: true, // 观察所有后代节点 characterData: true, // 观察文本变化 attributes: true // 观察属性变化 }; // 启动观察器,观察整个文档 observer.observe(document.body, config); // 也检查当前可能已存在的 tooltip const existingTooltip = document.getElementById('tooltip'); if (existingTooltip) { handleTooltip(existingTooltip); } } // 当 DOM 加载完成后初始化 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', observeTooltips); } else { observeTooltips(); } })();

推荐标签 标签

  • 印象笔记
    3 引用 • 16 回帖 • 2 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 2 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 193 关注
  • 职场

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

    127 引用 • 1708 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    187 引用 • 831 回帖
  • OpenResty

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

    17 引用 • 50 关注
  • Word
    13 引用 • 41 回帖
  • SOHO

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

    7 引用 • 55 回帖 • 3 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 823 关注
  • Access
    1 引用 • 3 回帖 • 4 关注
  • DevOps

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

    59 引用 • 25 回帖 • 4 关注
  • PWA

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

    14 引用 • 69 回帖 • 183 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • 新人

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

    52 引用 • 228 回帖
  • DNSPod

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

    6 引用 • 26 回帖 • 536 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    93 引用 • 122 回帖 • 619 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 2 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 141 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 606 关注
  • Ruby

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

    7 引用 • 31 回帖 • 262 关注
  • GitLab

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

    46 引用 • 72 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖