Quill: Titles on buttons

Created on 16 Jan 2017  路  3Comments  路  Source: quilljs/quill

Is it possible for titles to appear on the action buttons, i.e hovering 'B' would reveal 'Bold'?

Steps for Reproduction

Visit quill, hover over any action button

Expected behavior:

For a title to display 'Bold' when hovering over bold

Actual behavior:

No title displayed

Platforms:

All

Version:

All?

duplicate

Most helpful comment

@jhchen I've come here because there are no hover hints for the toolbar. All I see are weird suggestions like using Bootstrap tooltips or user hacks for such a basic piece of functionality.

Just add a title="whatever" attribute to the buttons. It's a browser standard.

<button type="button" class="ql-bold" title="Bold">

This is so simple. Why the aversion to adding this?

All 3 comments

650

@jhchen I've come here because there are no hover hints for the toolbar. All I see are weird suggestions like using Bootstrap tooltips or user hacks for such a basic piece of functionality.

Just add a title="whatever" attribute to the buttons. It's a browser standard.

<button type="button" class="ql-bold" title="Bold">

This is so simple. Why the aversion to adding this?

It's laughable how disregarded accessibility is among the JS community

var toolbar = quill.container.previousSibling;
toolbar.querySelector('button.ql-bold').setAttribute('title', 'Bold');
toolbar.querySelector('button.ql-italic').setAttribute('title', 'Italic');
toolbar.querySelector('button.ql-list').setAttribute('title', 'List');
toolbar.querySelector('button.ql-link').setAttribute('title', 'Link');
toolbar.querySelector('button.ql-script').setAttribute('title', 'Superscript');
toolbar.querySelector('button.ql-clean').setAttribute('title', 'Clear Formatting');
Was this page helpful?
0 / 5 - 0 ratings