<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
This is a basic example. Move mouse over this.
$(function(){ $('#basic').mouseover(function(){ $('#tip').popup('',$('#basic'),{},{close:'timeout',delay:1000}); }); });
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'}); }); });
This is a third example.
$(function(){ $('#show').click(function(){ $('<p>inline popup content.</p>').popup('a title', $('#adv'), {width:300}, {close: 'closeButton'}); }); });
By: deerchao