Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including tipso with all npm packages installed. Try it out:

var tipso = require("tipso")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

tipso v1.0.8

A Lightweight Responsive jQuery Tooltip Plugin

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

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

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

##Usage

NameDefaultDescription
speed400integer - 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
showArrowtrueAbility to show/hide the arrow of the tooltip (true, false)
position'top'Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right'
width200Width 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
delay200Delay before showing the tooltip in ms
hideDelay0Delay 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
offsetX0Offset value of the tooltip on X axis
offsetY0Offset value of the tooltip on Y axis
tooltipHoverfalseAbillity to interact with the tooltip content
contentnullThe content of the tooltip, can be text, html or whatever you want
ajaxContentUrlnullUrl for Ajax content
ajaxContentBuffer0Buffer timer for Ajax content
contentElementIdnullNormally used for picking template scripts
useTitlefalseTo use the default title attribute as content (true, false)
templateEngineFuncnullA function that compiles and renders the content
onBeforeShowfunction(){}Function to be executed before tipso is shown
onShowfunction(){}Function to be executed after tipso is shown
onHidefunction(){}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
Bojan Petkovski

Contributors

auxiliary

License

tipso is licensed under the MIT License

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free