vTip jQuery plugin to show animated tooltip on your Website/Blog – With translucent background and more via CSS

Step 1: Including the jQuery and Plugin JS on your Website/Blog Template:

If you have not already, then include the jQuery framework now. jQuery is basically a JavaScript Library and is needed for this plugin to work. The best way of inserting jQuery is by letting Google to host your file. We shall be discussing this in a short manner now. A detailed discussion is available here.

Step: 1.1 ~ Include jQuery via Google Hosting:

Regardless of where you are putting the script, (Blog or a Website) just add the following line of code, before the closing </head> tag of your Blog/Website (If you are using Blogger then go to Blogger Dashboard > Layout > Edit HTML and put it on the template XML. For WordPress self hosted, you can directly edit the header.php file of your Blog and then put this line of course before the closing </head> tag)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

This will insert the jQuery version 1.3.2. If a newer version of jQuery is available the time you are reading this tutorial then you should include that only. You can get the path here and a detailed instruction here.

Step: 1.2 ~ Getting the Plugin Library and modifying it:

• Go to the vTip Project page and Download the latest one available.
• Right now the latest one is version 2 and this is the direct download link.

Step: 1.2.1 ~ General Modification:

• UnZip the file you have downloaded and locate the vtip-min.js file. Open it with preferably Notepad++ or simple Notepad.
• Now search for the line images/vtip_arrow.png and replace it with http://i26.tinypic.com/5b8ck3.png
• Save the file and you are now ready to use it!

Step: 1.2.2 ~ Using on General Website or WordPress Self Hosted blogs:

• Upload the vtip-min.js file to your Website root folder or any other sub folder.
• Now edit the template of your Website (or if using WordPress blog edit the header.php file) and put the following line before the closing </head> and after the inclusion of the jQuery framework…

  <script type="text/javascript" src="URL_of_JS_File"></script>

• Make sure to replace the “URL_of_JS_File” with the relative/absolute URL of the vtip-min.js file you have uploaded. If you are having problem with relative URL then use absolute URL, say, http://yoursite.tld/js/vtip-min.js
• Save the Website template/header.php and you are done.

Step: 1.2.3 ~ Using the Plugin on Blogger Blogs:

Blogger by default does not let us uploading and hosting a JavaScript file. So we shall use the similar hack as that of hosting jQuery directly through blogger template… Just follow the steps

• Open up the modified vtip-min.js file with Notepad++ Select all the codes (Ctrl+A) and go to TextFX > TextFX Convert > Encode HTML. This should convert the whole code into escaped HTML characters.
• If you don’t have Notepad++ now, then just copy the following code.

  /**
  
  Vertigo Tip by www.vertigo-project.com

  Requires jQuery

  */

  this.vtip=function(){this.xOffset=-10;this.yOffset=10;$(&quot;.vtip&quot;).unbind().hover(function(a){this.t=this.title;this.title=&quot;&quot;;this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$(&quot;body&quot;).append(‘&lt;p id=&quot;vtip&quot;&gt;&lt;img id=&quot;vtipArrow&quot; /&gt;’+this.t+&quot;&lt;/p&gt;&quot;);$(&quot;p#vtip #vtipArrow&quot;).attr(&quot;src&quot;,&quot;http://i26.tinypic.com/5b8ck3.png&quot;);$(&quot;p#vtip&quot;).css(&quot;top&quot;,this.top+&quot;px&quot;).css(&quot;left&quot;,this.left+&quot;px&quot;).fadeIn(&quot;slow&quot;)},function(){this.title=this.t;$(&quot;p#vtip&quot;).fadeOut(&quot;slow&quot;).remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$(&quot;p#vtip&quot;).css(&quot;top&quot;,this.top+&quot;px&quot;).css(&quot;left&quot;,this.left+&quot;px&quot;)})};jQuery(document).ready(function(a){vtip()});

   

• Now open up the Template XML through Blogger Dashboard > Layout > Edit HTML. Make sure that you have included the jQuery framework as stated before. Else it will not work.
• Now just paste the code in the following manner obviously before the closing </head> tag:

  <script type='text/javascript'>

  //Replace this line with the escaped code

  </script>

• Make sure you have replaced the “//Replace this line with the escaped code” with the code you have generated/modified above.
• Now save the template and you are done implementing the Plugin JS.

So now that we are done including the necessary jQuery library and plugin library, lets style things up using CSS and call the codes properly but before that, let us take a quick look on what we have actually done in this step…

Understanding the Modification:

• On step 1.2.1 we have used a 75% translucent image to show the arrow on the tooltip. I have it green colored, you can make any image with 70% or 75% opacity on your Photoshop and use that image instead. But if you want to use your own, then do make a 10px X 10px image with same color and opacity which we are going to need on the upcoming step.
• Also if you have your own host, then download the images and put it on your web folders. Then either use absolute URL or relative URL (say, “images/vtip-arrow.png”) and replace with that only
• Step 1.2.2 is simple enough to understand. On 1.2.3 we have guided you to convert the whole code into escaped HTML character and then use it on Blogger XML for proper parsing. Also for your convenience we have included a ready made escaped code which you can just copy.

Step 2: Styling things up with CSS:

As usual, my favorite! First take a quick look at the CSS file we are going to use:

p#vtip {

    display: none;

    position: absolute; 

    padding: 10px; 

    left: 5px; 

    font-size: 13px;

    font-weight: bold;

    font-family: Arial;

    background: transparent url(http://i28.tinypic.com/zswn6g.png) scroll repeat 0 0; 

    -moz-border-radius: 5px; 

    -webkit-border-radius: 5px; 

    z-index: 9999; 

    max-width: 150px;

}

p#vtip #vtipArrow { 

    position: absolute; 

    top: -11px; 

    left: 10px 

}

Quite interesting isn’t it? Lets take a quick look on which part does what!

The image we are going to use for the arrow is 11px in height. To make that align properly we have put a top value of –11px. If you are using any other image on Step 1.2.1 then use the height if that image instead!

The image is going to give the cool translucent effect for our tooltip. You can use any 10px X 10px translucent image (75% recommended) of your choice.

Step: 2.1 ~ Implementing the code on General Websites/Self hosted WordPress:

Very much simple. Just copy the whole CSS code above (The one with syntax highlighting) and put it inside the style.css or similar CSS file of your website/wordpress blog. Save the changes and you are done

Step: 2.2 ~ Implementing on Blogger Template:

• Go to Blogger Dashboard > Layout > Edit HTML
• Now before the ]]></b:skin> Copy paste the whole code
• Save the template and you are done.

So enough of hard work now! Lets go into action

Step 3: Calling the jQuery vTip with proper class and title:

The calling of the vTip is really easy and simple. It can be bound with any HTML tag having a definite title and class="vtip". Check out the following examples:

<a class="vtip" 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</a>

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

<img src="" title="Obviously it can also be applied over an image" class="vtip"/> 

For an online demo check this:

•  Demonstration: Click Here

Do check the Source code of the page to see how things are set. Be it blogger/Wordpress or any other general website, the rule is same. Give a class="vtip" to a HTML element having the title attribute. The title attribute will be shown as the Tooltip.