jquery.contip.js is a JQuery-based bubble prompt box plugin that helps you create highly customizable and animated bubble tooltips.
balloon tooltip android, custom popup android github, jquery tooltip on hover example, which plugin is used to create a tooltip, javascript tooltip on hover, jquery tooltip on hover
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'); });
Fully Customizable Bubble Tooltip Plugin, jquery.contip.js Plugin/Github, simple tooltip jquery, jquery tooltip with html content
See Demo And Download
Official Website(jojoin): Click Here
This superior jQuery/javascript plugin is developed by jojoin. For extra Advanced Usages, please go to the official website.
Be First to Comment