如何修复模态框内Froala编辑器悬停时tooltip位置错误问题

问题表现 #

在模态框组件内嵌入Froala编辑器时，鼠标悬停工具栏按钮弹出的tooltip位置计算错误，会偏移显示在模态框区域外部；同项目其他非模态框场景下使用Froala编辑器时tooltip定位完全正常，仅模态框内实例存在该问题。
问题效果参考：

问题根因 #

该问题本质是浮层定位参考系不匹配导致的：
Froala默认会将tooltip这类浮层元素挂载到页面body节点下计算位置，而模态框组件通常会使用fixed定位、transform偏移属性，会生成独立的CSS堆叠上下文，此时浮层按全局坐标系计算出的位置，和模态框内的实际控件位置就会出现固定偏移。当前配置仅设置了编辑器本身的zIndex，没有处理浮层的挂载逻辑，才会出现仅模态框场景下的错位。

修复步骤 #

按优先级依次调整即可：

• 修改Froala初始化配置，强制指定tooltip的挂载容器为模态框内部节点，避免全局坐标系计算偏差，同时关闭模态框场景下容易冲突的粘性工具栏：

froala_options: FroalaOptions = {
    fullPage: true,
    key: FROALA_LICENSE_KEY,
    attribution: false,
    imageUploadURL: '',
    imageAllowedTypes: FROALA_EDITOR_ALLOWED_IMAGE_TYPES,
    toolbarButtons: WEB_TOOLBAR_BUTTONS,
    pluginsEnabled: PLUGINS_ENABLED_WEB,
    placeholderText: 'Enter your review request template here',
    emoticonsUseImage: false,
    pastePlain: true,
    zIndex: 1000,
    // 新增以下两项配置
    toolbarSticky: false,
    tooltipContainer: '.modal-content', // 该值替换为项目中模态框内容容器的实际选择器即可
    events: {
      'contentChanged': function() {
        let text = this.html.get() || '';
        text = text ? text.replace(/[\u2018\u2019]/g, "'").replace(/[\u201C\u201D]/g, '"') : '';
        localStorage.setItem('message_rich_text', text);
      }
    }
  }

• 检查模态框容器的CSS属性：如果模态框根节点设置了transform、will-change: transform这类会生成新堆叠上下文的属性，给模态框内容容器补充position: relative属性，确保内部浮层的定位参考系和编辑器控件保持一致。
• 排查全局自定义样式：如果全局样式表中对.fr-tooltip类写过硬编码的top、left偏移强制样式，先注释这类规则验证，这类全局硬编码的偏移值在不同堆叠上下文下会直接导致浮层错位，需要加父级选择器做范围限定，不要全局生效。

补充说明 #

贴出的HTML结构本身没有逻辑问题，不需要调整DOM结构，仅修改JS配置和对应CSS即可解决问题。

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