/** All toolbar buttons are inside of .ql-formats */
.ql-toolbar 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%;
    }
}