darktooltip    Star Tweet

darktooltip is a simple customizable tooltip with confirm option and effects

 

Basic usage:

<div id="def" class="box" data-tooltip="Hello world">default</div>

$('#def').darkTooltip();

 

 

Advanced options

You can specify some options to customize the appearance of darktooltip. Like this:

$('#def').darkTooltip({
    animation: 'flipIn',
    gravity: 'west',
    confirm: true,
    theme: 'light'
    ...
});

All available options:

Option	Possible values	Default value
opacity	0~1	0.9
content	Tooltip message	empty
size	small | medium | large	medium
gravity	south | west | north | east	south
theme	dark | light	dark
trigger	hover | click	hover
animation	none | flipIn | fadeIn	none
confirm	true | false	false
yes	Label for ‘Yes’ option	'Yes'
no	Label for No option	'No'
finalMessage	A message that appears at the end of the action for the confirm	''
finalMessageDuration	Duration of the final message in ms	1000ms
onYes	Function that is triggered when clicking ‘Yes’ on confirm	empty function
onNo	Function that is triggered when clicking ‘No’ on confirm	empty function

Here can see the demos for these options:

 

HTML content

Confirm

Confirm with custom events

Modal (new)

Sizes

Gravity

Animations

Themes

 

Installation

Clone the repo into your project

git clone https://github.com/rubentd/darktooltip.git

Or install using bower

bower install --save darktooltip

Then include the references to the css and js files in your html:

<link rel="stylesheet" type="text/css" href="bower_components/darktooltip/dist/darktooltip.css">

<script type="text/javascript" src="bower_components/darktooltip/dist/jquery.darktooltip.js"></script>

 

If you liked this plugin, don't forget to give me a star on Github.