Angular集成Summernote编辑器：Tooltip背景异常问题

我之前也碰到过类似的问题，结合经验来看，Summernote所有Tooltip都出现背景仅部分覆盖的情况，大概率是下面这些原因导致的：

• CSS样式冲突：这是最频发的原因。你的项目全局CSS（比如Bootstrap自定义样式、项目通用样式）可能篡改了tooltip相关属性，比如background-size、padding、max-width或者box-sizing。举个例子，要是全局给所有.tooltip设置了max-width: 200px，而Summernote Tooltip的内容长度超出这个值，就会出现背景只覆盖一部分的情况。建议打开浏览器开发者工具，选中Tooltip元素，查看「计算样式」面板，看看哪些属性被外部样式覆盖了。

• 版本兼容问题：如果你的Summernote版本较旧，很可能和项目依赖的jQuery、Bootstrap版本不匹配。比如某些旧版Summernote和Bootstrap 5的Tooltip样式逻辑存在冲突，导致背景渲染异常。你可以尝试升级到Summernote最新稳定版，或者对照官方文档确认依赖版本的匹配要求。

• 自定义Tooltip配置错误：要是你在初始化Summernote时自定义了Tooltip的配置（比如修改模板、样式选项），可能不小心破坏了默认的样式结构。比如自定义模板时漏掉了必要的容器元素，或者设置了错误的CSS类名。可以先注释掉自定义配置，恢复默认设置，看看问题是否消失。

• CSS优先级问题：Summernote自带的Tooltip样式优先级不够，被项目中更具体的CSS选择器覆盖了。比如项目里写了.app-container .tooltip这类选择器，优先级比Summernote默认的.note-tooltip更高，导致背景样式被篡改。你可以用开发者工具的样式面板，找到被划掉的Summernote默认样式，然后用更具体的选择器（比如 .note-editor .note-tooltip）来重新设置样式，提高优先级。

• 动态内容渲染时序问题：如果Tooltip里的内容是动态生成的，可能在内容加载完成前，Tooltip的背景已经渲染完毕，导致背景尺寸没适配最终的内容长度。这种情况可以监听Tooltip的显示事件，在内容加载完成后重新计算并设置Tooltip的背景尺寸。

内容的提问来源于stack exchange，提问作者Mike