Toolpik · A jQuery Tooltip by Taufik Nurrohman

Toolpik is a jQuery tooltip for manipulating the nested tooltip from the browser. Prioritized for <acronym> tag. This is a simple way to change your perspective about the articles. With Toolpik, you can display a beautiful description of the article. Let's take a look:

View Demo Download Deprecated Files

How to Use 

Toolpik has a simple way to activate. Simply just install the jQuery and jQuery Easing 1.3, then add the Toolpik scripts below:

<script src='jquery-1.6.2.min.js'></script>
<script src='jquery-easing-1.3.pack.js'></script>

<script>
$(document).ready(function() {
     $('acronym, abbr').hover(function(e) {
          var tip = $(this).attr('title'); //Grab the title attribute's value and assign it to a variable
          var imgh = 'ikon1.png'; //Call the image by variable to reduce load time (not important)
          $(this).attr('title', ''); //Remove the title attribute's to avoid the native tooltip from the browser

          //Change the default cursor to "help" when hovered and append the tooltip element and its value
          $(this).css('cursor', 'help').append('<div id="toolpik"><div id="nurrohman">' + tip + '</div><img alt="Absolute" class="absol" src="' + imgh + '" /><div style="clear: both;" /></div>');

          $('#toolpik').stop(true, true).delay(600).fadeIn(1000, "easeOutQuad"); //Show with fadeIn effect

          //Animate the top and left position follow the mouse pointer position
          $('#toolpik').delay(600).animate({top: e.clientY - 50, left: e.clientX - 170}, {duration:2000, easing:"easeOutBack"}).animate({top:e.clientY - 20}, 400);
     }, function(e) {
          var bringBack = $('#toolpik').html(); //Put back the title attribute's value
          $(this).attr('title',bringBack);
          $('#toolpik').remove(); //Remove the appended toolpik
     });
});
</script>

Activation 

Toolpik will find the value of title attribute and convert it to text in Toolpik. Simply wrap the text that you want and add the title attribute with the specified value and it will be a description in Toolpik:

Lorem ipsum <acronym title="I'm a Toolpik">I have a Toolpik</acronym>. Dolor silit pitik.

However, if you are not familiar using <acronym> or <abbr> as a marker, you can use another tags such as <a>. To enable <a> as Toolpik, replace the selector $('acronym, abbr') in jQuery to $('a[title]'). You can also insert HTML code into the title attribute to get various content. For safety reasons, just make sure that if you use double quotation symbol on the title attribute, you must use single quotes in tag attributes inside. And for more secure, parse all the code < with < and > with >

Lorem ipsum <acronym title="<h2 class='single-quotes'>I'm a Header</h2>I'm a Toolpik">I have a Toolpik</acronym>. Dolor silit pitik.

Lorem ipsum <abbr title="<h2 class='single-quotes'>I'm a Header</h2>I'm a Toolpik">I have a Toolpik</abbr>. Dolor silit pitik.

Or..

Lorem ipsum <acronym title="&lt;h2 class='single-quotes'&gt;I'm a Header&lt;/h2&gt;I'm a Toolpik">I have a Toolpik</acronym>. Dolor silit pitik.

Lorem ipsum <abbr title="&lt;h2 class='single-quotes'&gt;I'm a Header&lt;/h2&gt;I'm a Toolpik">I have a Toolpik</abbr>. Dolor silit pitik.