Tipso is lightweight and responsive jQuery plugin for the tooltip that supports title for the tooltip. You can modify the size, colour, position etc for the tooltip accordingly. Tipso is CSS3 animation supported with animate.css.
ajaxContentUrl.ajaxContentUrl.1. Include the Javascript tipso.min.js at the bottom of the web page.
<script src="path/to/tipso.min.js"></script>2. Include the CSS tipso.min.css in the header of the page.
<link rel="stylesheet" href="path/to/tipso.min.css">3. You can use CSS3 animation to tipso with Animate.css.
<link rel="stylesheet" href="path/to/animate.css">4. Add the basic HTML to the page.
<span class="tipso" data-tipso="This is a default TIPSO!">Default Tipso</span>5. Initialize the plugin and we're ready to go.
$('.tipso').tipso();// 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');| 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 |
<span class="top" data-tipso="This is a Position top TIPSO!">Position top</span>$('.top').tipso({
titleContent: 'Some Title',
background: 'rgba(0,0,0,0.8)',
titleBackground: 'tomato'
});<span class="bottom" data-tipso="This is a Position Bottom TIPSO!">Position Bottom</span>$('.bottom').tipso({
titleContent: 'Some Title',
position: 'bottom'
});<span class="left" data-tipso="This is a Position Left TIPSO!">Position Left</span>$('.left').tipso({
titleContent: 'Some Title',
position: 'left'
});<span class="right" data-tipso="This is a Position Right, no Title TIPSO!">Position Right, no Title</span>$('.right').tipso({
position: 'right'
});<span class="tiny-tooltip" data-tipso="This is a Tiny Tooltip TIPSO!">Tiny Tooltip</span>$('.tiny-tooltip').tipso({
size: 'tiny'
});<span class="small-tooltip" data-tipso="This is a Small Tooltip TIPSO!">Small Tooltip</span>$('.small-tooltip').tipso({
size: 'small'
});<span class="default-tooltip" data-tipso="This is a Default Tooltip TIPSO!">Default Tooltip</span>$('.default-tooltip').tipso({
size: 'default'
});<span class="large-tooltip" data-tipso="This is a Large Tooltip TIPSO!">Large Tooltip</span>$('.large-tooltip').tipso({
size: 'large'
});<span class="csAnime" data-tipso="This is a CSS3 Animation TIPSO!">CSS3 Animation</span>$('.csAnime').tipso({
animationIn: 'bounceIn',
animationOut: 'bounceOut'
});CSS3 animation effect to show the tooltip using Animate.css
<span class="with-link" data-tipso="This is a Tipso with Link">Tipso with Link</span>$('.with-link').tipso({
position: 'top',
background: '#000',
useTitle: false,
width: false,
maxWidth: 300,
tooltipHover: true,
content: function(){
return 'You can <a href="javascript:;">CLICK ME</a> now!';
}
});<li><span class="ajax" data-tipso="This is a Tipso with Ajax">Tipso with Ajax</span></li>$('.ajax').tipso({
background: 'tomato',
useTitle: false,
ajaxContentUrl : 'ajax.html'
});