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