Fully Customizable Bubble Tooltip Plugin For jQuery - contip.js

File Size: 100 KB
Views Total: 2332
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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.


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

// when tooltips are created
  // alert('Create tooltips');

// when tooltips is shown
  // alert('Sh');

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