A JQuery-based Bubble Tooltip Plugin | contip.js

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.

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

Read More –

Bootstrap Tooltips and Popovers Extend By Adding Custom Classes
jQuery Plugin To Create User-friendly Tooltips | GetTip


See Demo And Download

Official Website(jojoin): Click Here

This superior jQuery/javascript plugin is developed by jojoin. For extra Advanced Usage, please go to the official website.

Share