Animated & Customizable jQuery Tooltip Plugin - darktooltip

darktooltip is a jQuery and CSS3 based tooltip plugin for creating highly configurable, themeable and animated tooltips on any html elements.

Basic Usage:

1. Include the jQuery darktooltip plugin's stylesheet file in the head section of your page.

<link rel="stylesheet" href="css/darktooltip.css">

2. Create a simple mouse hover tooltip on an DIV element with data-tooltip attribute specifying the tooltip's content.

<div id="demo" data-tooltip="Hello world" >Hover me</div>

3. Include the jQuery javascript library and jQuery darktooltip plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.darktooltip.js"></script> 

4. Initialize the tooltip with default settings.

$(document).ready( function(){
$('#demo').darkTooltip();
});

5. All the available options.

$(document).ready( function(){
$('#demo').darkTooltip({
opacity: 0.9,
content:'',
size: 'medium', // small, medium or large
gravity: 'south', // south, north, west or east
theme: 'dark', // dark or light
trigger: 'hover', // hover or click
animation: 'none', // fadeIn, fadeIn or none
confirm: false, // with confirm button
yes: 'Yes',
no: 'No',
finalMessage: '',
finalMessageDuration: 1000,
onYes: function(){},
onNo: function(){}});
});

Change log:

0.3.1 (2014-08-05)

• Add modal background

0.2.0 (2014-07-18)

• make plugin "chainable" by returning

0.1.4 (2014-01-23)

• Added support for Fixed and absolute positioned containers

---

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