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
<link rel="stylesheet" href="/path/to/animate.css">
3. Call the plugin
$('.tipso').tipso();
Defaults
jQuery(element).tipso({
speed : 400,
background : '#55b555',
color : '#ffffff',
position : 'top',
width : 200,
delay : 200,
animationIn : 'fadeIn',
animationOut : 'fadeOut',
offsetX : 0,
offsetY : 0,
content : null,
ajaxContentUrl : null,
useTitle : true,
onBeforeShow : null,
onShow : null,
onHide : null
});
Demos
Position top, bottom, left and right
Lorem ipsum dolor sit left, consectetur adipisicing elit. Minima top nostrum, quia inventore ullam consequuntur velit right fuga officiis non repellendus ea qui nihil delectus, bottom eligendi accusamus ratione odio.
Show tipso on page load
Some content
Code Example
jQuery(window).load(function(){
jQuery('.page-load').tipso('show');
});
Tipso CSS3 Animation
Tipso tooltip with CSS3 animation effects using Animate.css
Animation In
Animation Out
Code Example
If you use animate.css
jQuery(.tipso).tipso({
animationIn: 'bounceIn',
animationOut: 'bounceOut'
});
If you don't use animate.css
jQuery(.tipso).tipso({
animationIn: '',
animationOut: ''
});
Click to show/hide tipso
Some content
Code Example
jQuery('.show-hide-tipso').on('click', function(e){
if(jQuery(this).hasClass('clicked')){
jQuery(this).removeClass('clicked');
jQuery('.show-hide').tipso('hide');
} else {
jQuery(this).addClass('clicked');
jQuery('.show-hide').tipso('show');
}
e.preventDefault();
});
Code Example
jQuery('.beforeShow').tipso({
background: 'tomato',
useTitle: false,
onBeforeShow : function(){
console.log('This is beforeShow');
}
});
jQuery('.beforeShow-tipso').on('click', function(e){
if(jQuery(this).hasClass('clicked')){
jQuery(this).removeClass('clicked');
jQuery('.beforeShow').tipso('hide');
} else {
jQuery(this).addClass('clicked');
jQuery('.beforeShow').tipso('show');
}
e.preventDefault();
});
Ajax content
Some content
Code Example
jQuery('.ajax').tipso({
background: 'tomato',
useTitle: false,
ajaxContentUrl : 'ajax.html'
});
Code Example
jQuery('.destroy-tipso').on('click', function(e){
jQuery('.destroy').tipso('destroy');
e.preventDefault();
});
Code Example
jQuery('.update-tipso').on('click', function(e){
jQuery('.update').tipso('update', 'content', 'this is updated tipso');
e.preventDefault();
});
Code Example
jQuery('.update-tipso-input').on('click', function(e){
var content = jQuery('.tipso-content').val();
jQuery('.update-tipso-content').tipso('update', 'content', content);
e.preventDefault();
});
Use title attribute for tipso
Some content
Code Example
jQuery('.title-tipso').tipso();
Add tipso to image
Code Example
jQuery('.img-tipso').tipso({
useTitle : false
});
Tipso Callback
Lorem ipsum dolor sit amet, Callback adipisicing elit. Autem, pariatur obcaecati perspiciatis non, ullam necessitatibus vel omnis vero nesciunt reprehenderit, quas voluptas quidem exercitationem quibusdam rerum suscipit ab illo!
Code Example
jQuery('.callback-tipso').tipso({
onShow : function(){
alert('Tipso Showed');
},
onHide: function(){
alert('Tipso Hidden');
}
});