Back jQuery

How to Create Fancy JQuery Tooltip for Your WordPress Post Title

WRITTEN BY ON 08 Mar 2011
12,404 VIEWS • SHARES
2 comments

Usually, WordPress theme developer already provide a tooltip for post title. This tutorial, a very easy tutorial, will help you add a fancy jQuery tooltip for your WordPress post title, replacing the default one. Read more: http://www.dynamicwp.net/articles-and-tutorials/how-to-create-fancy-jquerytooltip-for-your-wordpress-post-title/

Javascript

Put the code in the head tag

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

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
kamal 13 years ago
please tell me how to call this method in the application. i have written this code .
Reply
milo 12 years ago
In addition to the jQuery, there are other approaches to build a tooltip.

The easiest way is to use the pure CSS as follows:
<a href="http://www.menucool.com/tooltip/css-tooltip">CSS Tooltip</a>

Now CSS3 is available for most browsers. The following is also a good choice:
<a href="http://www.menucool.com/tooltip/css-tooltip">CSS Tooltip</a>

If you want a rich HTML tooltip that is cross browser compatible, use the following one:
<a href="http://www.menucool.com/tooltip/css-tooltip">CSS Tooltip</a>
Reply