登录 注册

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

  • 思源笔记

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

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

    25948 引用 • 107556 回帖
  • Q&A

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

    9962 引用 • 45247 回帖 • 76 关注
1 操作
JeffreyChen 在 2025-04-27 17:23:14 更新了该帖
北京 位置
100 悬赏
1 关注
1 操作
10 回帖
4
4
2
278 111 8 27 132

相关帖子

被采纳的回答
  • 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
北京
回帖
479
 帖子
34
 积分
32431

近期热议

推荐标签 标签

  • 房星科技

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

    6 引用 • 141 回帖 • 602 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 728 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 396 关注
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 119 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 111 关注
  • Word
    13 引用 • 41 回帖
  • C

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

    86 引用 • 165 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖 • 1 关注
  • Flutter

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

    39 引用 • 92 回帖 • 6 关注
  • Sym

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

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

    524 引用 • 4601 回帖 • 710 关注
  • VirtualBox

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

    10 引用 • 2 回帖 • 17 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 176 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3201 引用 • 8216 回帖
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    80 引用 • 396 回帖
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • SendCloud

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

    2 引用 • 8 回帖 • 502 关注
  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖
  • 锤子科技

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

    4 引用 • 31 回帖
  • OnlyOffice
    4 引用 • 22 关注
  • Flume

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

    9 引用 • 6 回帖 • 661 关注
  • SMTP

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

    4 引用 • 18 回帖 • 631 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 394 关注
  • HTML

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

    108 引用 • 295 回帖 • 2 关注
  • Follow
    4 引用 • 12 回帖 • 3 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 1 关注

最新标签