tipso
Version:
A Lightweight Responsive jQuery Tooltip Plugin
142 lines (109 loc) • 8.11 kB
Markdown
tipso
=====
A Lightweight Responsive jQuery Tooltip Plugin
[](https://travis-ci.org/object505/tipso)
[](https://www.npmjs.org/package/tipso)
[](http://bower.io/search/?q=tipso)
[](https://gratipay.com/object505/)
>There is also a Wordpress version of this plugin. Get it [here](https://wordpress.org/plugins/tipso/)
## Getting started
1. Include jQuery
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
```
>Requires jQuery 1.7+
2. Include plugin's code
```html
<link rel="stylesheet" href="/path/to/tipso.css">
<script src="/path/to/tipso.js"></script>
```
To use css3 animation effects please include [Animate.css](http://daneden.github.io/animate.css)
```html
<link rel="stylesheet" href="/path/to/animate.css">
```
3. Call the plugin
```javascript
$('.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](http://daneden.github.io/animate.css) |
| animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/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
```javascript
// 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](http://tipso.object505.com)
## Bugs
For bug reports, questions, feature requests, or other suggestions please create an [issue](https://github.com/object505/tipso/issues/new) on GitHub.
## Author
|  |
|---|
| [Bojan Petkovski](http://object505.com) |
## Contributors
[auxiliary](https://github.com/auxiliary)
## License
tipso is licensed under the [MIT License](http://object505.mit-license.org/)