tipso

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',
	titleBackground   : '#333333',
	color             : '#ffffff',
	titleColor        : '#ffffff',
	titleContent      : '',       
	showArrow         : true
	position          : 'top',
	width             : 200,
	maxWidth          : '',
	delay             : 200,
	hideDelay         : 0,
	animationIn       : '',
	animationOut      : '',
	offsetX           : 0,
	offsetY           : 0,
	tooltipHover      : false,
	content           : null,
	ajaxContentUrl    : null,
	contentElementId  : null,
	useTitle          : false,
	templateEngineFunc: null,
	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.

Corner positions

Lorem ipsum dolor sit top-right

Lorem ipsum dolor sit top-left

Lorem ipsum dolor sit bottom-right

Lorem ipsum dolor sit bottom-left

Title bar

Some content

Title bar automatic arrow color

Code Example

jQuery('.top').tipso({
  titleContent: 'Hello'
});
//or use data-tipso-title

Size option

Tiny tooltip, Small tooltip, Default tooltip, Large tooltip

Code Example

jQuery('.top').tipso({
  size: 'tiny'
});

Template engine support

The content of this tooltip comes from a template engine and gets changed randomly every time. This example is using Underscore.

Code Example

jQuery('.template-content').tipso({
  position: 'top',
  background: '#55b555',
  color: '#eee',
  useTitle: false,
  size: 'small',
  contentElementId: 'template_sample',
  templateEngineFunc: function(content){
  	var compiled = _.template(content);
  	var names = ['moa', 'sara', 'james', 'hugo', 'mehr'];
  	return compiled({name: _.sample(names)});
  },
  onBeforeShow: function(ele, tipso) {
  	ele.tipso('update', 'content', '');
  }
});

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

Interact with tipso tooltip

Some tooltip content you can interact with

Code Example

jQuery('.hover-tipso-tooltip').tipso({
    tooltipHover: true
});

Click to show/hide tipso

Some content

Click me to show/hide tipso

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

Click me to show/hide tipso

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

Click me to destroy tipso

Code Example

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

Update tipso

Some content

Click me to update tipso

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

Click me to update tipso with input 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({
  useTitle: true
});

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

Wish List

If you like and use my plugin here is my Amazon wish list :)

Donate

Made by Bojan Petkovski