JarCastingtipso
A Lightweight Responsive jQuery Tooltip Plugin
There is also a Wordpress version of this plugin. Get it here
Getting started
-
Include jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Requires jQuery 1.7+
-
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">
```
-
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-tipsoinstead of the title attribute for the tooltip content ( setuseTitle: false)
You can set all the options via
data-tipsoattribute. For example if you want to change the background you will adddata-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
 |
|---|
| Bojan Petkovski |
Contributors
License
tipso is licensed under the MIT License