How to implement tool tip in quill editor toolbar

Question

We are using "quill": "1.3.7" version of quill editor in Ionic 4 application. We need to show tool tip for toolbar options. Is there any possible to enable tooltip for toolbar options.Here attached the quill editor sample screen for your reference.

Answer 1

I've achieved this by doing a simple css hack.

   /** All toolbar buttons are inside of .ql-formats */
.ql-formats button {
    position: relative;

    /** Set a tooltip with css pseudo-elements, when buttons are hover, active or focus  */
    &:hover::after,
    &:active::after,
    &:focus::after {
        background: #0d1e42;
        color: white;
        padding: 0.5em;
        border-radius: 0.4em;
        top: -120%;
        left: -10px;
        z-index: 999999;
        position: absolute;
        font-size: 12px;

    }
}
/** Set tooltip content for bold button **/
.ql-bold {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Bold";
    }
}

.ql-italic {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Italic";
    }
}

.ql-underline {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Underline";
    }
}
.ql-strike {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Strikeout";
    }
}
.ql-link {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Hyperlink";
    }
}
.ql-blockquote {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Quote";
    }
}
.ql-list[value="bullet"] {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Bulleted List";
        top: -200%;
    }
}
.ql-list[value="ordered"] {
    &:hover::after,
    &:active::after,
    &:focus::after {
        content: "Numbered List";
        top: -200%;
    }
}

Suggestion: If you do it using SASS you problably gonna write less code.

Answer 2

I tried to come up with a recursive function to loop through all the tooltip options and assigning those the titles based on the config provided. Following configuration renders all the quill toolbar options

    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],
        ['link', 'image', 'video', 'formula'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean']                                         // remove formatting button
    ];

This config object takes mapping to those keys we want the labels against. Missing mappings will use the default key value from the original config.

    const toolbarOptionLabels = {
        'bold': "Bold",
        'italic': "Italic",
        'underline': "Underline",
        'strike': "Strike through",
        'blockquote': "Blockquote",
        'code-block': "Code block",
        'link': "Link",
        'image': "Image",
        'video': "Video",
        'formula': "Formula",
        'header': "Header",
        'list': "List",
        'script': "Script",
        'indent': "Indent",
        'direction': "Text direction",
        'size': "Text size",
        'color': "Text color",
        'background': "Bankground color",
        'font': "Font style",
        'align': "Align text",
        'clean': "Remove all formatting"
    };

Just use the following function to do the rest

    var setTitle = (menu, group, objIndex = 0) => {
        //if array then probe inside
        if (Array.isArray(menu)) {
            menu.forEach((obj, objIndex) => {
                setTitle(obj, group, objIndex);
            });
        } else {
            //if object then get the properties for labels
            if (typeof menu === 'object') {
                Object.keys(menu).forEach((key) => {
                    var title = `${toolbarOptionLabels[key]} ${menu[key]}`;
                    if (!title) {
                        title = `${key} ${menu[key]}`;
                    }
                    objIndex = Array.isArray(menu[key]) && objIndex > 0 ? 0 : objIndex;//fix background s
                    group.querySelectorAll(`.ql-${key}`)[objIndex].setAttribute('title', title);
                });
            } else {
                //finally assign labels from the properties seperated from the object
                var title = toolbarOptionLabels[menu];
                if (!title) {
                    title = menu;
                }
                group.querySelector(`.ql-${menu}`).setAttribute('title', title);
            }
        }
    }

This is how the function gets called

    var groups = document.querySelectorAll('.ql-formats');
    toolbarOptions.forEach((option, index) => {
        setTitle(option, groups[index]);
    });