Target wp_editor buttons to add a tooltip

1 Views

I have a multi-author website and no matter how much education I give to Authors, 80%+ either refuse to or forget to use headings in their posts, instead they use bold text on a separate line to designate a new section of the post.

In my battle, I am thinking that I should try to add a tooltip to the B in the wp_editor with a note that simply describes when to use and when not to use the B and when to use Heading instead.

Read More

I’m not sure if it makes a difference in how to target it, but I should also note that I use wp_editor on comments, on the bio section of the user profile, as well as on a custom meta field on the new post screen.

I already have notes added to various meta boxes on the new post page, using the methods described in – How to Add Reminders/Notes to New Post Meta Boxes

I have created an alerts.js file in /theme_name/js/ and added the following into my functions.php 

//Load jQuery to display New Post meta notes.
function load_my_alerts(){
      wp_register_script( 
        'my_alerts', 
        get_template_directory_uri() . '/js/alerts.js', 
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_alerts' );
}
add_action('admin_enqueue_scripts', 'load_my_alerts');

Complete contents of alerts.js 

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

$('<div/>', {
    id: 'tags-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p style="padding:5px;border:2px #fdff30 solid">Add 1 to 5 tags to describle your article. Any tags beyond the first 5 will be automatically removed. <a href="/faq#tags" target="_blank">Need Help?</a></p>'
}).appendTo('#tagsdiv-post_tag .howto');

$('<div/>', {
    id: 'category-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p class="howto" style="margin:1em;line-height:1.4em;padding:5px;border:2px #fdff30 solid">Select only 1 category for your article. If you select multiple categories, they will be removed and the category listed 1st alphabetically will become the category for your article. <a href="/faq#categories" target="_blank">Need Help?</a></p>'
}).appendTo('#categorydiv');

$('<div/>', {
    id: 'featured-image-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p class="howto" style="margin:1em;line-height:1.4em;padding:5px;border:2px #fdff30 solid">Upload an image at least 640px wide and 360px tall. <a href="/faq#add_featured" target="_blank">Need Help?</a></p>'
}).appendTo('#postimagediv');

$('<div/>', {
    id: 'cite-meta-reminder',
    class: 'meta-box-reminder',
    html: '<p class="howto" style="margin:1em;line-height:1.4em;padding:5px;border:2px #fdff30 solid">Fill out the information in this section when your article directly references another article, blog post, interview, TV or radio show segment, etc. Fill it out as completely as possible, but not all fields are required. Do not fill out this section if you are simply referencing box scores or statistics. <a href="/faq#cite" target="_blank">Need Help?</a></p>'
}).appendTo('#ecpt_metabox_4');

});
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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.