How to Create Fancy JQuery Tooltip for Your WordPress Post Title

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>

Share the love

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement