JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    A Lightweight Responsive jQuery Tooltip Plugin
    Filed under 

    • 🔾29%Overall
    • 321
    • 33.9 days
    • 🕩121
    • 👥8

    tipso

    A Lightweight Responsive jQuery Tooltip Plugin

    Build Status NPM version Bower version Gittip

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

    Getting started

    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>
      

      To use css3 animation effects please include Animate.css

       <link rel="stylesheet" href="/path/to/animate.css">
      
    3. Call the plugin

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

    ##Usage

    Name Default Description
    speed 400 integer - Duration of the fade effect in ms
    size '' Tipso Bubble size classes (string: 'tiny', 'small', 'default', 'large') or you can make your own classes
    background '#55b555' Background color of the tooltip, it can be hex, rgb, rgba, color name
    titleBackground '#333333' Background color of the tooltip title, it can be hex, rgb, rgba, color name
    color '#ffffff' Text color of the tooltip, it can be hex, rgb, rgba, color name
    titleColor '#ffffff' Text color of the tooltip title, it can be hex, rgb, rgba, color name
    titleContent '' The content of the tooltip title, can be text, html or whatever you want
    showArrow true Ability to show/hide the arrow of the tooltip (true, false)
    position 'top' Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right'
    width 200 Width of the tooltip in px or % (for % add the value in quotes ex.'50%')
    maxWidth '' max-width of the tooltip in px or % (for % add the value in quotes ex.'50%'). For usage you need to set width to '', false or null
    delay 200 Delay before showing the tooltip in ms
    hideDelay 0 Delay before hiding the tooltip in ms
    animationIn '' CSS3 animation effect to show the tooltip using Animate.css
    animationOut '' CSS3 animation effect to hide the tooltip using Animate.css
    offsetX 0 Offset value of the tooltip on X axis
    offsetY 0 Offset value of the tooltip on Y axis
    tooltipHover false Abillity to interact with the tooltip content
    content null The content of the tooltip, can be text, html or whatever you want
    ajaxContentUrl null Url for Ajax content
    ajaxContentBuffer 0 Buffer timer for Ajax content
    contentElementId null Normally used for picking template scripts
    useTitle false To use the default title attribute as content (true, false)
    templateEngineFunc null A function that compiles and renders the content
    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 )

    You can set all the options via data-tipso attribute. For example if you want to change the background you will add data-tipso-background="#555555" to the element.

    API

        // Show the tipso tooltip
        $('.tipso').tipso('show');
    
        // Hide the tipso tooltip
        $('.tipso').tipso('hide');
    
        // Hide/Close the tipso tooltip from inside the tooltip 
        // and/or without hideDelay timeout
        $('.tipso').tipso('close');
        // or as alternative
        $('.tipso').tipso('hide', true);
    
        // Destroy tipso tooltip
        $('.tipso').tipso('destroy');
    
        // Add a callback before tipso is shown
        $('.tipso').tipso({
            onBeforeShow: function ($element, element) {
                // Your code
            }
        });
    
        // Add a callback when tipso is shown
        $('.tipso').tipso({
            onShow: function ($element, element) {
                // Your code
            }
        });
    
        // Add a callback when tipso is hidden
        $('.tipso').tipso({
            onHide: function ($element, element) {
                // Your code
            }
        });
    
        // Load AJAX content to tipso
        $('.tipso').tipso({    
            useTitle: false,
            ajaxContentUrl : 'ajax.html'
        });
    
        // Update tipso options
        $('.tipso').tipso('update', 'content', 'new content');
    

    Demo

    Here is the link to the demo

    Bugs

    For bug reports, questions, feature requests, or other suggestions please create an issue on GitHub.

    Author

    twitter/BojanPetkovski](http://gravatar.com/avatar/30befed2bed6e1690a6b47cf617f7927?s=105
    Bojan Petkovski

    Contributors

    auxiliary

    License

    tipso is licensed under the MIT License

    Show All