darktooltip   

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();

 

Hover me

 

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

html

Confirm

Click to delete

Confirm with custom events

Click me too

Modal (new)

Sizes

Small
medium
large

Gravity

gravity:south
gravity:west
gravity:north
gravity:east

Animations

none
flipIn
fadeIn

Themes

dark
light

 

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 in Github. And check out my blog for more javascript related content.

 

Udemy