Learn and share. The simplest harmony.

 

TipTip a Beautiful Tooltip

Posted on January 6, 2010 and got 6 shouts so far

TipTip is a jQuery plugin made by Drew Wilson in order to make a tooltip for a link. I really like this tooltip because of its simplicity and beautiful appearance. Besides doesn’t use images, TipTip also has a functionality to detect edges of browser that makes it automatically look for an appropriate edge and therefore your tooltip will appear proportionally though the link position is in an edge making your tooltip overflow from the browser.

Just like tipsy, TipTip deletes the title attribute in your link so tooltip default of your browser will not appear. TipTip can run on common browsers such as Safari, Firefox, Opera, Chrome, IE7 and IE8. TipTip is double licensed; MIT and GPL.

Implementation

In this implementation I tried to use TipTip so as to give an information (a tooltip) to users in case that there’s a link on website page that opens a new window/tab. It will let the user notice that the link he/she wants to click will open a new tab/window.

Technically, it is very easy to implement that concept, that is by detecting the link attributed _blank (it indicates that the link will open in a new tab/window) then adding a title attribute to that link and running the TipTip function. Take a look at the following script:

$(document).ready(function() {

	$('a[target=_blank]').each(function() {

		var goto = $(this).attr('href');
		var text = "Hey, if you click me i will open a new tab and open " + goto;

		$(this).attr('title', text);
		$(this).tipTip();
	});
});

The explanation :

$('a[target=_blank]').each(function() {

indicates that each element a that has _blank target attribute will be processed.

var goto = $(this).attr('href');

taking the href attribute value in the element that being processed.

var text = "Hey, if you click me i will open a new tab and open " + goto;

the process of making the value of tooltip we want to show with an alert that the link will be opened in a new tab/window and open goto link (href) above.

$(this).attr('title', text);

adding title attribute containing the text in the link that being processed.

$(this).tipTip();

running the TipTip function in the link that being processed.


See? It’s simple, right? You can try the demo of the script above and download the source code of it. You can also get regular useful updates about web-stuff by subscribing webstuffshare RSS feed. If you like this post, your sharing and feedback would be very appreciated ;)

 

 

This Post Tags :

Bookmark Post :

Pin It
  • asik udah ada demonya :D

  • Download sourcenya juga ada :D

  • keren!!! ditunggu ulasan tentang jquery yang lainnya…

    btw kerjaan dikelarin, jangan kemari mulu hihi..

  • wekeke… tengkyu mam :D

  • hehehe dah banyak perubahan nih webnya :D
    nice bang, gudjob :)
    thx yo… hehe

  • In my opinion this one is better because it supporting important features like auto positioning

    http://www.webstuffshare.com/2009/12/tipsy-facebook-style-tooltip-plugin-for-jquery/

    But it’s frustrating that both of these can’t handle long strings… (you can see what I mean if you go to the TipTip demo here, and hover over the ‘new tab’ link)