How to Create Fancy JQuery Tooltip for Your WordPress Post Title

7th Mar 2011 | Posted by reza | 10 Comments

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.

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

kibal4iw says:

March 8, 2011 at 07:19

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

Reply
Johann says:

March 27, 2011 at 09:07

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?

Reply
- reza says:
  
  March 27, 2011 at 17:28
  
  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
  
  Reply
Brett Widmann says:

May 18, 2011 at 13:32

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

Reply
johnwcb says:

March 30, 2012 at 12:10

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

Reply