lego lab example download fork

Hi! I'm a TipPop Jquery Plugin

Tiny (about 1.5kB gzipped) tool, that takes care of all your hover and focus pop ups!

1
2
3
4
5

Usage:

Just download, unzip and include TipPop.js after JQuery source in your html markup:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tippop.min.js"></script>

and CSS styles file into a <head> section:

<link rel="stylesheet" href="tippop.css" />

to initialize TipPop just type:

$('body').tipPop();
 

That's it! So simple. It takes care of all your elements with title attribute, all inputs with data-focus attribute and creates a tooltip:


<a href="mailto:somemail@email.com" title="mail me" >mail me</a>
<input type="text" title="I'm a hover text" data-focus="I'm a focus text!" />

Will produce:

mail me

If you want to skip certain element, add a data-skip="true" attribute:


<div title="I'm a hover text" data-skip="true"></div>

Settings:

TipPop expects one parameter, it could by one of two types:

1. JSON object to pass settings:

$('body').tipPop({
    
    // default settings

    type: 'all',    //  tooltip type, could be 'all' || 'hover' || 'focus'  
                    
                    //  'all'   is "on hover" + "on focus" tooltip
                    //  'hover' is "on hover" tooltip 
                    //  'focus' is "on focus" tooltip

    offset: 8,      //  tooltip offset from parent element in pixels

 

    // default hover tooltip position  

    hoverPosition: 'best',   // 'best', 'top',
                             // 'bottom', 'left', 'right', 'top_left', 
                             // 'top_right', 'bottom_left', 'bottom_right'

                             // 'best' is best available
                             // position in users view 
                             // ( !not in viewport but in view )
    


    // priority for hover event

    hoverPriority: [ 'top', 'bottom', 'left', 'right',
                    'top_left', 'top_right', 'bottom_left', 'bottom_right' ],

    // if hoverPosition is set to 'best', you can specify
    // search side position priority (left has more larger priority)


    // default focus tooltip position  

    focusPosition: 'best',   // 'best','left',  
                             // 'right', 'bottom', 'top', 'top_left',
                             // 'top_right', 'bottom_left', 'bottom_right' 

                             // 'best' is best available
                             // position in users view 
                             // ( !not in viewport but in view )
    


    // priority for focus event

    focusPriority: [ 'left', 'right', 'bottom', 'top',
                    'top_left', 'top_right', 'bottom_left', 'bottom_right' ],

    // if focusPosition is set to 'best', you can specify
    // search side position priority (left has more larger priority)


    // fires when hover tooltip shown
    hoverOnShow : function(){ console.log 'banana is deliciuos!'},

    // fires when hover tooltip hidden
    focusOnShow : function(){ console.log 'orange rocks!'},



    // fires when focus tooltip shown
    hoverOnHide : function(){ console.log 'grape is sweet!'},

    // fires when focus tooltip hidden
    focusOnHide : function(){ console.log 'and pineapple!'}


 
});
 

2. String with method name to destroy:

$('body').tipPop('destroy'); // 'destroy' || 'destroyHover' || 'destroyFocus'
 

By default TipPop listen to elements with title and data-focus attributes inside node, wrapped in JQuery object (body for this example). You can specify only hover or focus tooltip by passing JSON object to .tipPop() function with type property:

$('body').tipPop({
    
    type: 'hover' // listen on hover event only
 
});
 

or:

$('body').tipPop({
    
    type: 'focus' // listen on focus event only
 
});
 

or both:

$('body').tipPop({
    
    type: 'all' // listen on focus and hover events, it's default value
 
});
 

offset is tooltip offset from parent element in pixels:

$('body').tipPop({
    
    offset: 8 // tooltip offset from parent element in pixels
 
});
 

hoverPosition and focusPosition is tooltip position on hover and focus events accordingly

$('body').tipPop({
    
    hoverPosition: 'best',   // 'best', 'top',
                             // 'bottom', 'left', 'right', 'top_left', 
                             // 'top_right', 'bottom_left', 'bottom_right'

                             // 'best' is best available
                             // position in users view 
                             // ( !not in viewport but in view )
 
});
 

if 'best' is set, TipPop will find the best available position, by iterating through hoverPriority/focusPriority array accordingly (left has larger priority) :

$('body').tipPop({
    
    // priority for hover event

    hoverPriority: [ 'top', 'bottom', 'left', 'right',
                    'top_left', 'top_right', 'bottom_left', 'bottom_right' ],

    // if hoverPosition is set to 'best', you can specify
    // search side position priority (left has more larger priority)

    // for focus event

    focusPriority:  [ 'top', 'bottom', 'left', 'right',
                    'top_left', 'top_right', 'bottom_left', 'bottom_right' ],
});
 

If it won't find availible tooltip position, it will fallback to the first one in hoverPriority/focusPriority array


You can also set hoverOnShow(),hoverOnHide() and focusOnShow(), focusOnHide() callbacks, that will fire after hover / focus tooltip shows or hides

$('body').tipPop({

    // fires when hover tooltip shown
    hoverOnShow : function(){ console.log 'banana is deliciuos!'},

    // fires when hover tooltip hidden
    focusOnShow : function(){ console.log 'orange rocks!'},



    // fires when focus tooltip shown
    hoverOnHide : function(){ console.log 'grape is sweet!'},

    // fires when focus tooltip hidden
    focusOnHide : function(){ console.log 'and pineapple!'}

});
 

To destroy TipPop just pass a string with a destroy method, 3 of them availble:

$('body').tipPop('destroy'); // destroys TipPop entirely
    
    //or

$('body').tipPop('destroyHover'); // destroys TipPop hover tooltip

    //or

$('body').tipPop('destroyfocus'); // destroys TipPop hover tooltip


To initialize destroyed tooltip back just call TipPop again, it will run method only if it isn't runned yet and ignore alredy runned one:

$('body').tipPop(); // TipPop initialize
 
download fork