[Quill] 툴바에 호버 시 tooltip 보여주기

import Quill from "quill";

interface TooltipOptions {
  tooltips?: { [key: string]: string };
}

class TooltipModule {
  private quill: Quill;
  private options: TooltipOptions;

  constructor(quill: Quill, options: TooltipOptions = {}) {
    this.quill = quill;
    this.options = options;

    // Set default tooltips if not provided
    if (!this.options.tooltips) {
      this.options.tooltips = {
        bold: 'Bold',
        italic: 'Italic',
        underline: 'Underline',
        header: 'Header',
        list: 'List',
        align: 'Align',
        link: 'Link',
        image: 'Image',
        video: 'Video',
        clean: 'Remove Formatting',
      };
    }

    this.addToolTips();
  }

  addToolTips() {
    const toolbarButtons = this.quill.container.querySelectorAll('.ql-toolbar button, .ql-toolbar .ql-picker');

    toolbarButtons.forEach((button) => {
      const buttonClass = button.classList[0];
      const buttonName = buttonClass.replace('ql-', '');
      const tooltipText = this.options.tooltips[buttonName] || buttonName.charAt(0).toUpperCase() + buttonName.slice(1);
      button.setAttribute('title', tooltipText);
    });
  }
}

// Register the TooltipModule
Quill.register('modules/tooltipModule', TooltipModule);