登录 注册

修改右侧块备注的气泡大小、字号大小

  • 思源笔记

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

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

    25556 引用 • 105694 回帖
  • Q&A

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

    9780 引用 • 44480 回帖 • 87 关注
1 操作
JeffreyChen 在 2025-04-27 17:23:14 更新了该帖
北京 位置
100 悬赏
1 关注
1 操作
10 回帖
4
4
2
226 109 15 102

相关帖子

被采纳的回答
  • wilsons • • 1
    付费者 捐赠者

    j 佬的代码分开再加上宽度，也基本能解决你的问题，可能没 js 那么完美。

    可定制宽度，不可定制高度。

    .protyle-attr--memo.b3-tooltips::before,
.protyle-attr--memo.b3-tooltips::after {
	font-size: 2em;
	line-height: 1em;
}
.protyle-attr--memo.b3-tooltips::after {
    transition: none;
    white-space: pre-wrap;
    width: 100vw;
}
10 回帖
修改右侧块备注的气泡大小、字号大小

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen • • 1 • 2 评论
    付费者 支持者 捐赠者 
    .protyle-attr--memo.b3-tooltips::before,
.protyle-attr--memo.b3-tooltips::after {
	font-size: 2em;
	line-height: 1em;
	transition: none;
	white-space: pre-wrap;
}
    1 回复
    1 操作
    JeffreyChen 在 2025-04-27 18:33:04 更新了该回帖
    长备注会省略（……），可以在限制宽度下完整显示备注么？或者高度也限制，超出高度，则显示滚动条。
    8V9q7V •
    @8V9q7V 显示滚动条也没用，鼠标没法放在提示上面，所以只能全显示
    JeffreyChen •
  • 8V9q7V • • 2 评论
    订阅者 支持者 捐赠者 勇士 作者

    变成竖长的效果了

    20250427184446.png

    我研究了一下，我没法用 CSS 解决这个问题，JS 实现倒是不难，但我现在不太有空
    JeffreyChen •
    @JeffreyChen 得空吗，我看看哪种效果好
    8V9q7V •
  • 8V9q7V •
    订阅者 支持者 捐赠者 勇士 作者

    @wilsons 有时间么，J 佬没空码 js

    1. 指定气泡宽高，内容超出高度显示滚动条
      • 如果 js 无法实现滚动条，则只指定宽度，内容完整显示
    2. 指定字号大小
    3 回复
  • wilsons • • 10 评论
    付费者 捐赠者

    @JeffreyChen 我不太会，怎样实现？

    我想到办法是抛弃现有方案，使用全局 tooltip

    是这个方法。我已经有一个 JS 实现了，不过是旧版的 tooltip 逻辑，还需要跟进新版修改
    JeffreyChen • • 1
    @JeffreyChen 怎么解决鼠标移出目标元素 tooltip 消失问题？拦截移出事件？
    wilsons •
    @wilsons 没印象了，你可以看看行级备注的 tooltip 为什么可以把鼠标移上去
    JeffreyChen •
    @JeffreyChen 备注的 tooltip 也无法移上去。好困 😴 先撤了 @8V9q7V J 佬已有代码，我们就坐等白嫖吧 🤣
    wilsons •
    @wilsons 刚刚看了代码，实际上是有滚动条的 tooltip 不会隐藏 Issue #9194 · siyuan-note/siyuan
    JeffreyChen •
    @JeffreyChen 这个是官方 bug 吗？会不会被修复。
    wilsons •
    @wilsons 这个是预期行为，鼠标移动到有滚动条的 tooltip 上，这个 tooltip 就不会立即隐藏。如果没有滚动条那就会立即隐藏。详情见 issue 关联的帖子
    JeffreyChen •
    @JeffreyChen 但怎样移动上去呢？貌似 tooltip 鼠标移动不上去。有滚动条时可移动吗？但，怎样让它有滚动条呢？
    wilsons •
    @wilsons tooltip 和触发元素要紧靠着才能移上去（中间有间隔距离的话就不行了）；max-height 可以弄出滚动条
    JeffreyChen • • 1
    @JeffreyChen👍 学习了，空了研究下。
    wilsons •
  • wilsons • • 1
    付费者 捐赠者

    j 佬的代码分开再加上宽度，也基本能解决你的问题，可能没 js 那么完美。

    可定制宽度，不可定制高度。

    .protyle-attr--memo.b3-tooltips::before,
.protyle-attr--memo.b3-tooltips::after {
	font-size: 2em;
	line-height: 1em;
}
.protyle-attr--memo.b3-tooltips::after {
    transition: none;
    white-space: pre-wrap;
    width: 100vw;
}
  • wilsons • • 1 • 2 评论
    付费者 捐赠者

    你的 js 版也实现了

    r126.gif

    https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%A4%87%E6%B3%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%90%E7%A4%BA%E6%A1%86.js

    这个参数配置样式即可

    // 这里设置提示框样式
const tooltipStyles = `
    max-width: 400px;
    max-height: 200px;
    font-size: 16px;
    line-height: 150%;
`;
    2 回复
    用了 little 模式，因为这个能点击备注图标，no 则不能。没感觉出闪烁问题。
    8V9q7V •
    @8V9q7V 闪烁是从提示窗移回 M 图标上时，会闪一下，不过一般不会这么操作，除非偶尔碰到。
    wilsons •
  • JeffreyChen • • 3 评论
    付费者 支持者 捐赠者

    既然 w 佬已经实现了，那我就不写了 doge

    这个不完美，最好能直接监听到备注的图标上，不过那样要等待文档加载，比较麻烦。
    wilsons •
    @wilsons 监听整个窗口性能也是够的
    JeffreyChen •
    @JeffreyChen 不是性能问题，其实完美的方式是鼠标离开 M 图标提示消失，但这要给 M 图标绑定 mouseenter 事件，不能用 mouseover，mouseover 会在俩开 M 图标进入提示框的时候触发，导致提示框闪动一下，但 mouseenter 不支持委托，所以这里如果用委托只能用 mouseover，所以，为了解决闪动问题，我只能让提示框出现时覆盖住 M 图标，但这样看起来就无法左右移动鼠标让提示框消失了，所以，我尝试采用部分覆盖，虽然鼠标从 M 图标到提示框不会闪动了，但从提示框到 M 图标也会触发 mouseover 闪动一下，所以这里用 mouseover 难以完美解决，要么忍受轻微闪动，要么忍受 M 图标鼠标左右小范围移动时提示框无法消失。这要看使用者的习惯了，我感觉问题都不大，所以我也设置了 flashingStatus 参数可以选择使用哪种效果。这样说，你可能不太明白，你试试就应该知道了。如果感兴趣的话，也可以试试看，看看能否完美解决这个问题。
    wilsons •
  • 8V9q7V •
    订阅者 支持者 捐赠者 勇士 作者

    发现 little 下，在修改长文本备注后（短文本不会）会在备注下层显示思源原生备注。要手动刷新当前文档后才不会显示。然后：

    1. 如果是思源的限制而无法处理的话，用 no 也行
    2. no 无法点击备注图标，不知道能不能修复
      • 思源的限制无法修复的话，那只能接着用当前的 no 模式了

    20250430142010.png

    1 回复
  • 8V9q7V •
    订阅者 支持者 捐赠者 勇士 作者

    （短文本不会），不是不会，而是短备注把原生备注盖住了。

  • wilsons • • 1
    付费者 捐赠者

    好了，更新代码试试

    已改为默认 little 模式

请输入回帖内容 ...
8V9q7V
北京
回帖
477
 帖子
34
 积分
32051

近期热议

推荐标签 标签

  • TextBundle

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

    1 引用 • 2 回帖 • 81 关注
  • SMTP

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

    4 引用 • 18 回帖 • 634 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    118 引用 • 54 回帖 • 3 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 502 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 223 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • Netty

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

    49 引用 • 33 回帖 • 37 关注
  • jQuery

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

    63 引用 • 134 回帖 • 733 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    495 引用 • 931 回帖
  • VirtualBox

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

    10 引用 • 2 回帖 • 18 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 397 关注
  • Anytype
    3 引用 • 31 回帖 • 16 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 316 关注
  • 酷鸟浏览器

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

    3 引用 • 59 回帖 • 48 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 44 回帖 • 2 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 110 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 512 关注
  • Bug

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

    76 引用 • 1742 回帖 • 6 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • 阿里云

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

    84 引用 • 324 回帖
  • 锤子科技

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

    4 引用 • 31 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖 • 2 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖

最新标签