Simple tooltip plug-in: jQuery. popup

Document directory

• Document
• Example
• Another Example
• Example 3
• Download

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