QuillToolbarTip

online demo

Install

npm install quill-toolbar-tip

Usage

If you want to use English text, you can use the default tip text that export named defaultToolbarTip

import QuillToolbarTip, { defaultToolbarTip } from 'quill-toolbar-tip';
import 'quill-toolbar-tip/dist/index.css';

Quill.register({
  [`modules/${QuillToolbarTip.moduleName}`]: QuillToolbarTip,
}, true);

const QuillToolbarTipOption = {
  tipTextMap: defaultToolbarTip['en-US']
};

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic',],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ color: [] }, { background: [] }],
    ],
    [QuillToolbarTip.moduleName]: QuillToolbarTipOption
  },
});

Or you can add the text in tipTextMap to display in the tooltip. The keys matchs the toolbar format name.

import QuillToolbarTip from 'quill-toolbar-tip';
import 'quill-toolbar-tip/dist/index.css';

Quill.register({
  [`modules/${QuillToolbarTip.moduleName}`]: QuillToolbarTip,
}, true);

const QuillToolbarTipOption = {
  tipTextMap: {
    bold: 'Bold',
    italic: 'Italic',
    color: {
      onShow(target, value) {
        return `Font Color${value ? `: ${value}` : ''}`;
      },
    },
    background: {
      onShow(target, value) {
        return `Background Color${value ? `: ${value}` : ''}`;
      },
    },
  }
};

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic',],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ color: [] }, { background: [] }],
    ],
    [QuillToolbarTip.moduleName]: QuillToolbarTipOption
  },
});

You can set specify tip with key:value. For setting the tip text 'Unordered List' for a bullet list, you can use 'list: bullet': 'Unordered List'`

const QuillToolbarTipOption = {
  tipTextMap: {
    'list:ordered': 'Ordered List',
    'list:bullet': 'Unordered List',
  }
};

You also can set an options for the key, and use the onShow to calculate the text of the tooltip. but you should use the onShow option, the msg / content or string value will be ignored. The final display text will be the item value.

const QuillToolbarTipOption = {
  tipTextMap: {
    script: {
      onShow(target, value) {
        const text = {
          sub: 'Subscript',
          super: 'Superscript',
        };
        return text[value] || null;
      },
    },
  }
};

Options

| Option | Type | Description | | --------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | defaultTooltipOptions | Partial<TooltipOptions> | Default tooltip options. | | tipTextMap | Record<string, Partial<TooltipItem> \| string> | Tooltip text map. You can also set a object that will be use in the tooltip. The configuration of tooltip options is shown below |

Types and default value

| Option | Description | | --------- | ------------------------------------------------------------------------------------------ | | direction | The direction of the tooltip display | | delay | The delay before the tooltip is displayed and hidden in milliseconds. | | msg | The message of the tooltip | | content | The content of the tooltip | | className | The class name of the tooltip | | onShow | Callback when tooltip show. If onShow return undefined, the tooltip will not be shown. |

interface TooltipOptions {
  direction:
    | 'auto'
    | 'auto-start'
    | 'auto-end'
    | 'top'
    | 'top-start'
    | 'top-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end'
    | 'right'
    | 'right-start'
    | 'right-end'
    | 'left'
    | 'left-start'
    | 'left-end';
  msg: string;
  delay: number;
  content: HTMLElement;
  className: string | string[];
  onShow: (target: HTMLElement) => string | HTMLElement | undefined;
}

Only one of msg / content and onShow will be effective at the same time, with a priority of onShow > content > msg.

That means if you set a options like below. the final display text will be 'C'

const B = document.createElement('span');
B.textContent = 'B';

tipTextMap = {
  color: {
    msg: 'A',
    content: B,
    onShow() {
      return 'C';
    },
  },
};

The parameter value of onShow is the current value of the toolbar button or select

interface TooltipItem extends Omit<TooltipOptions, 'onShow'> {
  onShow: (target: HTMLElement, value: string) => string | HTMLElement;
}

The defaultTooltipOptions like below

const tooltipDefaultOptions = {
  msg: '',
  delay: 150,
  direction: 'top',
  className: [] as string[],
};