How to Create Fancy JQuery Tooltip for Your WordPress Post Title

Usually, WordPress theme developer already provide a tooltip for post title. This tooltip appears when visitor hover the mouse over a post title in the home page or archive page or any page with linked post title.

This tutorial, really easy tutorial, will help you add a fancy jQuery tooltip for your WordPress post title, replacing the default one.

You can check the demo of this tutorial here: DEMO
Go hover the title of a post there and the fancy tooltip will appear.

jQuery Image Gallery Plugins

Ok, let’s start the tutorial.

We will use twenty ten as the example theme

  • first, We need to call the jQuery framework file.
    open header.php of twentyten theme and add

    wp_enqueue_script( 'jquery' ); 
    

    right before

    wp_head();
    
  • Next, Adding script to create the tooltip
    also in the header.php of twenty ten, place these the codes

    <script type="text/javascript">
    	function simple_tooltip(target_items, name){
    	 jQuery(target_items).each(function(i){
    			jQuery("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+jQuery(this).attr('title')+"</p></div>");
    			var my_tooltip = jQuery("#"+name+i);
    
    			if(jQuery(this).attr("title") != ""){ // checks if there is a title
    
    			jQuery(this).removeAttr("title").mouseover(function(){
    					my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(340);
    			}).mousemove(function(kmouse){
    					my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
    			}).mouseout(function(){
    					my_tooltip.fadeOut(200);
    			});
    
    			}
    		});
    	}
    
    	jQuery(document).ready(function(){
    		 simple_tooltip(".entry-title a","title-tooltip");
    	});
    
    </script>
    

    right before:

    </head>
    
  • And last, styling the tooltip

    in style.css of twenty ten, add this style

    .title-tooltip{ position:absolute;  z-index:999; left:-9999px; background-color:#dedede; padding:3px; border:1px solid #fff; min-width: 200px;}
    .title-tooltip p{  margin:0; padding:0; color:#fff; background-color:#222; padding:2px 7px;}
    

Now your post title comes with that fancy tooltip

Hope this tutorial helpfull.

5 Comments to “How to Create Fancy JQuery Tooltip for Your WordPress Post Title”

Add Comments (+)

  1. kibal4iw says:

    Sorry. Could you correct your code? This </head< change on this

  2. Johann says:

    Thank for sharing a cool tip. But I can’t implement it on my website. Does it need to output post content in a pre-configured format? Or just copy and paste the above code in header.php file?

    • reza says:

      usually, theme developer use class entry-title for post title and add title attribute to the title

      I’m using that habit for the tutorial

      if this doesn’t work try replace ‘entry-title’ in the tutorial with your theme post title class

  3. This was a really helpful code snippet. I love how this works.

  4. johnwcb says:

    There are many approaches to build a tooltip.

    The most easy approach is to use the pure CSS as follows:
    CSS Tooltip

    Now CSS3 is available for most browsers, so the following is also a choice:
    CSS3 Tooltip

    If you want a rich HTML tooltip that is cross browser compliant, use the following one:
    Javascript Tooltip

Trackbacks/Pingbacks

  1. wp-popular.com » Blog Archive » How to Create Fancy JQuery Tooltip for Your WordPress Post Title
  2. How to Create Fancy JQuery Tooltip for Your WordPress Post Title | WebDevKungfu
  3. Helpful Tips, Hacks and Tutorials about WordPress - Wordpress Arena
  4. 55 Best WordPress Tricks And Hacks | stylishwebdesigner
  5. 如何给WordPress日志标题提示信息添加jQuery效果

Leave a Reply

 

Amazingly Beautiful WordPress Themes