Fully Customizable Bubble Tooltip Plugin For jQuery - contip.js

contip.js is a powerful jQuery plugin which helps you make animated, heavily customizable bubble tooltips.

Features:

• Custom positions: top, left, right, bottom.
• Custom triggers: hover, hover, click, dblclick, focus, etc...
• Custom fade in/out animations.
• Loads tooltip content from any attributes in the element.
• Supports any Html content.
• Custom padding, radius, background color, text color, and font size.

Basic Usage:

1. Load the jQuery contip.js script after you have jQuery library included.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/jquery.contip.js"></script>

2. Call the plugin on any Html element which has a title attribute. By default, the plugin will display a tooltip on mouse hover that auto loads tooltip content from the title attribute. You can also embed complex Html content into the tooltip using HTML option during initialization.

$('SELECTOR').contip().show();

3. All the customization options.

// top, right, bottom or left
align: 'top',

// padding
padding: 7,

// border radius of your bubble tooltips
radius: 4,

// opacity
opacity: 1,

// max width of your bubble tooltips
max_width: 222,

// relative position
rise: 0, 

// background color
bg: '#000',

// foreground color
fg: 'transparent',

// text color
color: '#fff',

// text size
font_size: '12px',

// animaition options
fade: 0,
delay_in: 0, 
delay_out: 0, 
live: false, 
hold: true, 

// Html snippets you wish to embed into the tooltips.
html: '',

// custo attributes
attr: 'title',

// trigger events
// hover, click, dblclick, focus
trigger: 'hover',

// shows the tooltips on page load
show: false,

// tooltip arrow indicatior options
v_size: 6, 
v_pos: 0.5, 
v_px: 0,
elm_pos: 0.5,
elm_px: 0

4. Events available.

var pop = $('.elm').contip({
  align: 'bottom',
  html: 'Tooltip content'
}); 

// shows the tooltips
pop.show(); 

// when tooltips are created
pop.on('create',function($tip){
  // alert('Create tooltips');
});

// when tooltips is shown
pop.on('show',function($tip){
  // alert('Sh');
});

---

This awesome jQuery plugin is developed by angjiePro. For more Advanced Usages, please check the demo page or visit the official website.