Adding a tooltip above Categories postbox in Post Editor

3 Views

I’m looking to add an onmouseover tooltip link above the categories postbox/widget in the post editor screen of the WordPress backend to help further clarify to the users on my site which is the most suitable category to post in.

Does anyone have a simple and elegant solution that avoids hacking the core files?

Read More

First I want to add the text:

Add text.

Then I want to add a Tool Tip like this when some one hovers the mouse over that text:

Tooltip

Post Views: 3

Related posts

1 comment

  1. Place this code in your functions.php theme (or child theme) file. It uses jQuery to add a new box above the Category div (<div id="categorydiv" class="postbox " >).

    add_action( 'admin_footer-post.php',     'wpse_99252_add_categories_title_attribute' );
add_action( 'admin_footer-post-new.php', 'wpse_99252_add_categories_title_attribute' );

/**
 * Add a title attribute to categories box in the Post Editor.
 */
function wpse_99252_add_categories_title_attribute() { ?>
    <script type="text/javascript">

        // Setup tool tip box.
        jQuery( "#categorydiv" ).before( '<center id="categorydiv-tooltip">Which catgeory should I post in?</center>' );

        // Style it. Hide it.
        jQuery( "#categorydiv-tooltip" ).css( {
             'margin-bottom': '4px',
             visibility: 'hidden'
             // Add more styles here.
        } );

        // Display or hide tool tip box on mouse events.
        jQuery( "#categorydiv" ).mouseenter( function() {
            jQuery( "#categorydiv-tooltip" ).css( 'visibility', 'visible' );

        } ).mouseleave( function() {
            jQuery( "#categorydiv-tooltip" ).css( 'visibility', 'hidden' );
        } );

    </script>
    <?php
}

Comments are closed.