Animated & Customizable jQuery Tooltip Plugin - darktooltip

File Size: 50.3 KB
Views Total: 4653
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></script>
<script src="js/jquery.darktooltip.js"></script> 

4. Initialize the tooltip with default settings.

$(document).ready( function(){

5. All the available options.

$(document).ready( function(){
opacity: 0.9,
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.