简单的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'});
});
});
Download
By: deerchao
