jQuery Tooltips

So here’s the JS

$(document).ready(function(){

$('[rel=tooltip]').bind('mouseover', function(){

 if ($(this).hasClass('ajax')) {
 var ajax = $(this).attr('ajax'); 

 $.get(ajax,
 function(theMessage){
$(''  + theMessage + '').appendTo('body').fadeIn('fast');});

}else{

var theMessage = $(this).attr('content');
 $('' + theMessage + '').appendTo('body').fadeIn('fast');
 }

 $(this).bind('mousemove', function(e){
 $('div.tooltip').css({
 'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
 'left': e.pageX + 15
 });
 });
 }).bind('mouseout', function(){
 $('div.tooltip').fadeOut('fast', function(){
 $(this).remove();
 });
 });
 });

The HTML

The following combination of attributes can be added to any link to create a tooltip.

rel=”tooltip” | this enables the link as a tooltip without this no tooltip would be show for that specific link
class=”ajax” | if you want to call another page using ajax into the tooltip you need to add this class aswell as add the attribute ‘ajax’ with the link to the page you want to call
ajax=”AJAX_URL_HERE” | this is where you specify the link to the page that you want to pull in using ajax.
content=”Tooltip content” | this is where you put your main tooltip text including any image using regular html

 <li><a href="#" alt="Text Tooltip" rel="tooltip" content="Text Title This is an example of a text tooltip with jquery">Text Tooltip</a></li>

<li><a href="#" alt="Image Tooltip" rel="tooltip" content="Image Title <img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" class="'tooltip-image'/" /> This is an example of an image tooltip with jquery, with a little bit of text. Remember you can follow me on twitter just search: ashleyford">Image Tooltip</a></li>

<li><a href="#" alt="Image Tooltip" rel="tooltip" content="Iframe Tooltip ">Iframe Tooltip</a></li>

<li><a href="#" class="ajax" alt="Image Tooltip" rel="tooltip" ajax="ajax.php?id=1823472">Ajax Tooltip</a></li>

Download:htmldrive.net/items/download/281

Nếu bạn không download được hoặc có vấn đề gì hãy viết comments vào form dưới hoặc liên hệ

Tin mới hơn:

Tin cũ hơn:

<< Trang truớcTrang kế >>

Recommended Web Hosting For Bloggers and Designers

I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.