Feature Request: Tooltips for toolbar buttons

[MHillier98]

This is something that is currently possible with QuillJS, as seen here. Is this something that could please be added? Or maybe I've just missed something in adding this to my project and it already exists.

[KillerCodeMonkey]

same as in the quill example. simply use ngx-quill - and after onEditorCreated is called you can select all tooltip elements and enable them.

But instead of jquery use plain js or the angular way to do this. but i can consider to add an option to enable tooltips in an easier way. like an input

EDIT: ahh i see. quill uses jquery/bootstrap tooltips for that. so i will not add it as a feature.

So you need to install jquery + bootstrap, and select the element like the example with jquery.

[Hubertformin]

It doesn't work, I get an error with the current Jquery snippet

[jdgamble555]

Just adding here that you can easily add tootips with matTooltip.

<button class="ql-list" value="bullet" matTooltip="Bullet List"></button>

Or if you don't want to import a library and you don't need options:

<button class=ql-list" value="bullet" title="Bullet List"></button>

[KillerCodeMonkey]

sure it is easy with matTooltip, but everybody needs to add material then

You could even try to build your own tooltip directive wrapping matTooltip or what ever, but use the selector of the directive to something like button.ql-xxxx to only add those functionality automatically to the quilltoolbar

or some native JS easy solution slab/quill#650 (comment)

[marceloloureiro]

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  */
.ql-formats button:hover:after,
.ql-formats button:active:after,
.ql-formats button:focus:after {
    position: absolute;
​    background: black;
    color: white;
    padding: .5em;
    border-radius: .5em;
    left: -50%;
    top: 100%;
    width: max-content;
    z-index: 1;
}
​
/** Set tooltip content for bold button **/
.ql-bold:hover:after,
.ql-bold:active:after,
.ql-bold:focus:after {
   content: 'Put here your hint to the Bold button';
}
​
/** Set tooltip content for Italic button **/
.ql-italic:hover:after,
.ql-italic:active:after,
.ql-italic:focus:after {
   content: 'Put here your hint to the Italic button';
}

/** repeat foreach button in toolbar */

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

[pinich]

Thanks for sharing @marceloloureiro !!!
Here is an scss version of your example with minor tweaks.

/** 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%;
    }
}

[watevadafa]

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  */
.ql-formats button:hover:after,
.ql-formats button:active:after,
.ql-formats button:focus:after {
    position: absolute;
​    background: black;
    color: white;
    padding: .5em;
    border-radius: .5em;
    left: -50%;
    top: 100%;
    width: max-content;
    z-index: 1;
}
​
/** Set tooltip content for bold button **/
.ql-bold:hover:after,
.ql-bold:active:after,
.ql-bold:focus:after {
   content: 'Put here your hint to the Bold button';
}
​
/** Set tooltip content for Italic button **/
.ql-italic:hover:after,
.ql-italic:active:after,
.ql-italic:focus:after {
   content: 'Put here your hint to the Italic button';
}

/** repeat foreach button in toolbar */

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

This is amazing, but for some reason the scss break when used with ql-image, I wanted to mentioned content like "Attach Images" looks like this