I am an anchor link! Click me!
 
Hover on me! I am a div element having two classes... Bascially it is all the same. We are just using the default class system. The Plugin is designed in such a way that it will bind the function to every HTML element having class vtip and will show the tooltip having the title of the same element. You can check the uncompressed version of the vTip js to see how things are programmed

Show the source code Go back to where I came from 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <title>Sample of vTip by inTechgrity ~ Swashata</title>
  6. <style>
  7. 	body {
  8. 	padding: 40px;
  9. 	margin: 20px;
  10. 	font-size: 14px;
  11. 	font-face: Verdana;
  12. 	}
  13.    .mydiv{
  14. 		/* Keep hidden until called by javascript */
  15. 		display:none;
  16. 		Border:silver 2px solid;
  17. 		width:500px;
  18. 		/* some space for BG image */
  19. 		padding:2px 2px 2px 100px;
  20. 		background: #81a8b8 url(http://i28.tinypic.com/10erm2b.gif) no-repeat left center;
  21. 		font-size:25px;
  22. 		color:#333333;
  23. 		margin:5px;
  24.    }
  25.    p#vtip {
  26. 		display: none;
  27. 		position: absolute; 
  28. 		padding: 10px; 
  29. 		left: 5px; 
  30. 		font-size: 13px;
  31. 		font-weight: bold;
  32. 		font-family: Arial;
  33. 		background: transparent url(http://i28.tinypic.com/zswn6g.png) scroll repeat 0 0; 
  34. 		-moz-border-radius: 5px; 
  35. 		-webkit-border-radius: 5px; 
  36. 		z-index: 9999; 
  37. 		max-width: 150px;
  38. }
  39. 	p#vtip #vtipArrow { 
  40. 		position: absolute; 
  41. 		top: -11px; 
  42. 		left: 10px 
  43. 	}
  44.  
  45. </style>
  46. 	<!-- first load jQuery -->
  47. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  48. 	<!-- Now we are including the JS library of vTip plugin directly, You can use any mehtod you want! -->
  49. 	<script type="text/javascript">
  50. /**
  51. Vertigo Tip by www.vertigo-project.com
  52. Requires jQuery
  53. */
  54. this.vtip=function(){this.xOffset=-10;this.yOffset=20;$(".vtip").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtip"><img id="vtipArrow" />'+this.t+"</p>");$("p#vtip #vtipArrow").attr("src","http://i26.tinypic.com/5b8ck3.png");$("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtip").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtip").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtip()});
  55. 	</script>
  56. <!-- And some more effect for the div animation! Not needed, but still lets see what jQuery can do actually ;) -->
  57. <script type="text/javascript">
  58. $(document).ready(function() {
  59. 	$("div.mydiv").show(5000);
  60.  
  61. 	$("#anchor").click(function() { //get the element having id "anchor" Again we could have used a#anchor but I like my code to be short, Now the following onClick events are introduced
  62. 		$("div.mydiv").toggle(1000); //Toggles the display and visibility. To know more about toggle see here http://docs.jquery.com/Effects/toggle
  63. 		var valuee = $(this).html(); //We want to change the value of the <a> element when clicked. So we are getting the values using html() See here for more info http://docs.jquery.com/Attributes/html
  64. 		if(valuee=="I am an anchor link! Click me!") { valuee = "Click me again to show up the div below"; } // This and below line conditionally sets the value
  65. 		else { valuee = "I am an anchor link! Click me!"; }
  66. 		$(this).html(valuee); //Now we ultimately change the innerHTML to our modified value
  67. 		return false; //Again to make sure that href is not followed
  68. 	});
  69.  });
  70.  
  71.  
  72. </script>
  73.   </head>
  74.   <body>
  75. <a class="vtip" id="anchor" title="Hi! How are you.. This is the Tooltip which will be shown when the document is ready" href="http://www.intechgrity.com">I am an anchor link! Click me!</a>
  76. <div style="clear: both;">&#160;</div>
  77. <div class="vtip mydiv" title="You can also show the tooltip for a div or any html element">Hover on me! I am a div element having two classes... Bascially it is all the same. We are just using the default class system. The Plugin is designed in such a way that it will bind the function to every HTML element having class vTip and will show the tooltip having the title of the same element. You can check the uncompressed version of the vTip js to see how things are programmed</div>
  78. <img src="http://1.bp.blogspot.com/_M0X9MzkzNXE/Sl7QpE_M8zI/AAAAAAAADfM/NvY7dTGMv3s/S1600-R/logo-ITG.jpg" title="Obviously it can also be applied over an image" class="vtip"/> 
  79.   </body>
  80. </html>