Submit your widget

tipso - A Lightweight Responsive jQuery Tooltip Plugin

Created 4 years ago   Views 15108   downloads 3734    Author n/a
tipso - A Lightweight Responsive jQuery Tooltip Plugin
View DemoDownload
43
Share |

tipso

A Lightweight Responsive jQuery Tooltip Plugin

There is also a Wordpress version of this plugin. Get it here

  1. Include jQuery

    
    		
    
    		
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    Requires jQuery 1.7+

  2. Include plugin's code

    
    		
    
    		
    <link rel="stylesheet" href="/path/to/tipso.css">
    <script src="/path/to/tipso.js"></script>
  3. Call the plugin

    
    		
    
    		
    $('.tipso').tipso();

##Usage

Name Default Description
speed 400 integer - Duration of the fade effect in ms
background '#55b555' Background color of the tooltip, it can be hex, rgb, rgba, color name
color '#ffffff' Text color of the tooltip, it can be hex, rgb, rgba, color name
position 'top' Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right'
width 200 Width of the tooltip in px
delay 200 Delay before showing the tooltip in ms
offsetX 0 Offset value of the tooltip on X axis
offsetY 0 Offset value of the tooltip on Y axis
content null The content of the tooltip, can be text, html or whatever you want
ajaxContentUrl null Url for Ajax content
useTitle true To use the default title attribute as content (true,false)
onBeforeShow function(){} Function to be executed before tipso is shown
onShow function(){} Function to be executed after tipso is shown
onHide function(){} Function to be executed after tipso is hidden

Additionaly you can use data-tipso instead of the title attribute for the tooltip content ( set useTitle: false )



    // Show the tipso tooltip 
    $('.tipso').tipso('show');
 
    // Hide the tipso tooltip 
    $('.tipso').tipso('hide');
 
    // Destroy tipso tooltip 
    $('.tipso').tipso('destroy');
    
    // Add a callback before tipso is shown 
    $('.tipso').tipso({
        onBeforeShowfunction(){
            // Your code 
        }
    });
 
    // Add a callback when tipso is shown 
    $('.tipso').tipso({
        onShowfunction(){
            // Your code 
        }
    });
 
    // Add a callback when tipso is hidden 
    $('.tipso').tipso({
        onHidefunction(){
            // Your code 
        }
    });
 
    // Load AJAX content to tipso 
    $('.tipso').tipso({ 
        useTitle: false,
        ajaxContentUrl : 'ajax.html'
    });
 
    // Update tipso options 
    $('.tipso').tipso('update', 'content', 'new content');

Here is the link to the [demo][demo] [demo]: http://tipso.object505.com

For bug reports, questions, feature requests, or other suggestions please create an [issue][issue] on GitHub. [issue]: https://github.com/object505/tipso/issues/new

Bojan Petkovski

tipso is licensed under the MIT License