A JQuery-based Bubble Tooltip Plugin

jquery.contip.js is a JQuery-based bubble prompt box plugin that helps you create highly customizable and animated bubble tooltips.

Features:

Custom positions: top, left, right, bottom.
Custom Triggers: hover, hover, tap, dblclick, focus, etc…
Animation fade-in/out customized.
Loads tooltip content from any attributes in the element.
Supports any HTML content.
Custom padding, radius, background color, text color, and font size.

Pure CSS Ripple Effect Animation for Android Material Design

How to make use of it:

1. Load the jQuery contip.js script after including the jQuery library.

<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 that has the title attribute.

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

3. All 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. Available events.

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