如何在Quill编辑器工具栏中实现Tooltip提示功能

针对Ionic 4中使用quill@1.3.7版本实现工具栏Tooltip的需求，目前有两种成熟的可行方案，具体实现如下：

方案1：启用Snow主题内置Tooltip（最简实现） #

Quill 1.3.7的Snow主题默认已内置工具栏Tooltip能力，无需引入额外依赖，仅需完成如下配置即可生效：

• 确保正确引入Snow主题样式，可在Ionic项目的global.scss中全局引入：

  @import '~quill/dist/quill.snow.css';
  

• 初始化Quill实例时指定theme为snow，同时配置tooltip参数：

  import Quill from 'quill';
  
  ngAfterViewInit() {
    const quillInstance = new Quill('#editor-container', {
      theme: 'snow',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }]
          // 其余工具栏配置保留你的原有逻辑即可
        ],
        tooltip: {
          delay: 400 // 自定义悬浮触发延迟，单位为毫秒
        }
      },
      placeholder: '输入内容'
    });
  }
  

• 若Tooltip被Ionic的原生组件遮挡，可添加全局样式提升层级：

  .ql-tooltip {
    z-index: 99999 !important;
  }
  

方案2：自定义Tooltip（适配多语言/自定义样式需求） #

如果需要修改Tooltip的默认文案（比如改为中文）、自定义展示样式，可以手动给工具栏按钮添加title属性实现，兼容性更强：

// Quill实例初始化完成后执行如下逻辑
const tooltipMapping = {
  'ql-bold': '加粗',
  'ql-italic': '斜体',
  'ql-underline': '下划线',
  'ql-strike': '删除线',
  'ql-blockquote': '引用块',
  'ql-code-block': '代码块',
  'ql-list[value="ordered"]': '有序列表',
  'ql-list[value="bullet"]': '无序列表'
  // 按你的工具栏配置补充其余按钮的映射关系即可
};

Object.keys(tooltipMapping).forEach(selector => {
  const btnDom = document.querySelector(`.ql-toolbar ${selector}`);
  if (btnDom) btnDom.setAttribute('title', tooltipMapping[selector]);
});

注意：如果你使用的是ngx-quill封装库，上述配置逻辑完全兼容，仅需将配置项传入[modules]输入属性即可。

内容的提问来源于stack exchange，提问作者PTR Arun Prasath