jQuery轻量级响应式Tooltip插件 A Lightweight Responsive jQuery Tooltip Plugin

Tooltip可以定位在上下左右四个位置

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

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();
});

Before show

Some content

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'
});

Destroy tipso

Some content

Code Example

jQuery('.destroy-tipso').on('click', function(e){
  jQuery('.destroy').tipso('destroy');
  e.preventDefault();
});

Update tipso

Some content

Code Example

jQuery('.update-tipso').on('click', function(e){
  jQuery('.update').tipso('update', 'content', 'this is updated tipso');
  e.preventDefault();
});

Update content tipso

Some content

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');
  }
});