quill-toolbar-tip

Quill Toolbar Tip

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 match 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
  },
});

Configuration Structure

For toolbar formats with multiple values (like pickers and dropdowns), you can use the values object to map each value to its tooltip text:

const QuillToolbarTipOption = {
  tipTextMap: {
    list: {
      values: {
        ordered: 'Ordered List',
        bullet: 'Unordered List',
      },
    },
    align: {
      values: {
        '': 'Left aligned',
        'center': 'Center aligned',
        'right': 'Right aligned',
        'justify': 'Justify aligned',
      },
    },
  }
};

You can also use the onShow function to dynamically calculate the tooltip text. When both values and onShow are provided, onShow takes priority:

const QuillToolbarTipOption = {
  tipTextMap: {
    script: {
      values: {
        sub: 'Subscript',
        super: 'Superscript',
      },
      // onShow takes priority over values
      onShow(target, value) {
        return `Script: ${value}`;
      },
    },
  }
};

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

Tooltip Options

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
tipHoverable	Display tooltip when tooltip is hovered. Default is true.
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[],
};