简单的tooltip插件: jQuery.popup

Document

requires:
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="jquery.popup.js"></script>
---------------
example:
$('<p>some tooltip here.</p>').popup('this is title.', $('#source'), {widht:200}, {close:'timeout'});
---------------
$.fn.popup = function(title, element, location, closeType, classes){...}
---------------
title
string, title text of popup
---------------
element
element, the element that popup's position is based on
---------------
location
width, height
integer, size of the popup
space
integer, space between element and popup
vertical
string, one of 'default', 'below', 'above', 'middle'
horizontal
string, one of 'left', 'right', 'center', 'default'
---------------
closeType
close
string, one of 'timeout', 'mouseout', 'click', 'closeButton'
delay
integer, when using 'timeout', how long before hiding
element
element, when using 'mouseout', 'click', the event source element
---------------
classes
popup
string, class of the whole popup
title
string, class of the title
closeButton
string, class of the close button
content
string, class of tooltip content

Example

This is a basic example. Move mouse over this.

$(function(){
$('#basic').mouseover(function(){
$('#tip').popup('',$('#basic'),{},{close:'timeout',delay:1000});
});
});

Another Example

This is another example. Click here to show/hide the popup.

$(function(){
$('#ex2').click(function(){
$('#tip').popup('This is the title.', $('#ex2'), {space:20, vertical:'above', height:50}, {close:'click'});
});
});

Example 3

This is a third example.span#show

$(function(){
$('#show').click(function(){
$('<p>inline popup content.</p>').popup('a title', $('#adv'), {width:300}, {close: 'closeButton'});
});
});

what ever it is!

Download

Click here to download.

By: deerchao