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.

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(){
        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


$('<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>'

$('<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>'

$('<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>'


1 Answer 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.');


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


    $('<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.

  • Thanks. How do I go about implementing this? I already have an alerts.js file that I use for adding notes to tags, categories and featured image meta boxes. I figure this would be a good place to include it. This is the method I used to create it - wordpress.stackexchange.com/questions/49014/… May 1, 2012 at 21:41
  • If you already have a JS file you enqueue on the admin side, use that. If not, you'll need to create one and use admin_enqueue_scripts to add it on the admin side.
    – EAMann
    May 1, 2012 at 22:21
  • I suppose I am asking how to add this to the alerts.js file I already have. I have pasted it as you've written, but nothing happens. I even tried to delete everything else from the file, only leaving your code, still nothing showed up. May 1, 2012 at 22:36
  • I'd need to see what's in your alert.js file and exactly how you're registering the file with WordPress. Please edit your question to include those details.
    – EAMann
    May 2, 2012 at 2:51
  • updated question May 2, 2012 at 2:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.