Download Demo
Tipso is a Lightweight Responsive jQuery Tooltip Plugin.
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="/path/to/tipso.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="/path/to/tipso.js"></script>2. HTML
<p>Some <span class="title-tipso" title="This is the default title">content</span></p>3. JAVASCRIPT
jQuery('.title-tipso').tipso();
4. OPTIONSjQuery(element).tipso({
speed : 400,
background : '#55b555',
color : '#ffffff',
position : 'top',
width : 200,
delay : 200,
offsetX : 0,
offsetY : 0,
content : null,
useTitle : true,
onShow : null,
onHide : null
});
| 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 |
| useTitle | true | To use the default title attribute as content (true,false) |
| onShow | function(){} | Function to be executed after tipso is shown |
| onHide | function(){} | Function to be executed after tipso is hidden |
$('.tipso').tipso('show');
// Hide the tipso tooltip
$('.tipso').tipso('hide');
// Destroy tipso tooltip
$('.tipso').tipso('destroy');
// Add a callback when tipso is shown
$('.tipso').tipso({
onShow: function(){
// Your code
}
});
// Add a callback when tipso is hidden
$('.tipso').tipso({
onHide: function(){
// Your code
}
});
// Update tipso options
$('.tipso').tipso('update', 'content', 'new content');

No comments:
Post a Comment