Target wp_editor buttons to add a tooltip

The “bold” icon on the visual editor is represented by a <span> with the class of mce_bold. You can target it using jQuery pretty easily and add a tooltip:

jQuery('.mce_bold').attr('title', 'Please use an H2 tag instead.');

If you want to target it inside the HTML editor as well, use this code instead:

jQuery('.mce_bold, #qt_content_strong').attr('title', 'Please use an H2 tag instead.');

Update

To add this to your alert.js file, just add it inside your jQuery ready() call like so:

jQuery(document).ready(function($){

    $('<div/>', { // Cut out for brevity

    $('<div/>', { // Cut out for brevity

    $('<div/>', { // Cut out for brevity

    $('<div/>', { // Cut out for brevity

    $('.mce_bold, #qt_content_strong').attr('title', 'Please use an H2 tag instead.');
});

I didn’t copy your entire code, just enough to give you an idea of where to put things. Also, since you’re inside a closure that defines $ as an alias for jQuery, you can just use it instead.

I’ve tested this via the browser console debugger, and it works as advertised. If you have any problems, double check your console to see if JS errors are being thrown anywhere else.

Update

Related Posts: