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)
Click me
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 on Github.