How about quill's toolbar insert bubble tip component？

Question

Sorry my native language is not English, I want to insert hints in the toolbar of quill, is there a way to do it, thanks a lot Expected results

This is the hint component https://element.eleme.cn/#/en-US/component/tooltip

Answer 1

Run it, here's my thought process, and here's the full code

  var quill = new Quill('#editor', {
    theme: 'snow'
  });

initButtonTitle()

function initButtonTitle() {
  const titleConfig = [{
      Choice: ".ql-bold",
      title: "加粗"
    },
    {
      Choice: ".ql-italic",
      title: "斜体"
    },
    {
      Choice: ".ql-underline",
      title: "下划线"
    },
    {
      Choice: ".ql-header",
      title: "段落格式"
    },
    {
      Choice: ".ql-strike",
      title: "删除线"
    },
    {
      Choice: ".ql-blockquote",
      title: "块引用"
    },
    {
      Choice: ".ql-code",
      title: "插入代码"
    },
    {
      Choice: ".ql-code-block",
      title: "插入代码段"
    },
    {
      Choice: ".ql-font",
      title: "字体"
    },
    {
      Choice: ".ql-size",
      title: "字体大小"
    },
    {
      Choice: '.ql-list[value="ordered"]',
      title: "编号列表"
    },
    {
      Choice: '.ql-list[value="bullet"]',
      title: "项目列表"
    },
    {
      Choice: ".ql-direction",
      title: "文本方向"
    },
    {
      Choice: '.ql-header[value="1"]',
      title: "h1"
    },
    {
      Choice: '.ql-header[value="2"]',
      title: "h2"
    },
    {
      Choice: ".ql-align",
      title: "对齐方式"
    },
    {
      Choice: ".ql-color",
      title: "字体颜色"
    },
    {
      Choice: ".ql-background",
      title: "背景颜色"
    },
    {
      Choice: ".ql-image",
      title: "图像"
    },
    {
      Choice: ".ql-video",
      title: "视频"
    },
    {
      Choice: ".ql-link",
      title: "添加链接"
    },
    {
      Choice: ".ql-formula",
      title: "插入公式"
    },
    {
      Choice: ".ql-clean",
      title: "清除字体格式"
    },
    {
      Choice: '.ql-script[value="sub"]',
      title: "下标"
    },
    {
      Choice: '.ql-script[value="super"]',
      title: "上标"
    },
    {
      Choice: '.ql-indent[value="-1"]',
      title: "向左缩进"
    },
    {
      Choice: '.ql-indent[value="+1"]',
      title: "向右缩进"
    },
    {
      Choice: ".ql-header .ql-picker-label",
      title: "标题大小"
    },
    {
      Choice: '.ql-header .ql-picker-item[data-value="1"]',
      title: "标题一",
    },
    {
      Choice: '.ql-header .ql-picker-item[data-value="2"]',
      title: "标题二",
    },
    {
      Choice: '.ql-header .ql-picker-item[data-value="3"]',
      title: "标题三",
    },
    {
      Choice: '.ql-header .ql-picker-item[data-value="4"]',
      title: "标题四",
    },
    {
      Choice: '.ql-header .ql-picker-item[data-value="5"]',
      title: "标题五",
    },
    {
      Choice: '.ql-header .ql-picker-item[data-value="6"]',
      title: "标题六",
    },
    {
      Choice: ".ql-header .ql-picker-item:last-child",
      title: "标准"
    },
    {
      Choice: '.ql-size .ql-picker-item[data-value="small"]',
      title: "小号",
    },
    {
      Choice: '.ql-size .ql-picker-item[data-value="large"]',
      title: "大号",
    },
    {
      Choice: '.ql-size .ql-picker-item[data-value="huge"]',
      title: "超大号",
    },
    {
      Choice: ".ql-size .ql-picker-item:nth-child(2)",
      title: "标准"
    },
    {
      Choice: ".ql-align .ql-picker-item:first-child",
      title: "居左对齐"
    },
    {
      Choice: '.ql-align .ql-picker-item[data-value="center"]',
      title: "居中对齐",
    },
    {
      Choice: '.ql-align .ql-picker-item[data-value="right"]',
      title: "居右对齐",
    },
    {
      Choice: '.ql-align .ql-picker-item[data-value="justify"]',
      title: "两端对齐",
    },
  ];
  for (let item of titleConfig) {
    let tip = document.querySelector(item.Choice);
    if (!tip) continue;
    tip.setAttribute("data-tippy-content", item.title);
  }
  tippy('[data-tippy-content]');
}

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<div id="editor">

</div>