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>
3. Call the plugin
$('.tipso').tipso();
Defaults
jQuery(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
});
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');
});
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');
}
});