1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href=".../simpletooltip/dist/css/simpletooltip.min.css" media="screen" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src=".../simpletooltip/dist/js/simpletooltip.min.js"></script>
2. HTML
<h1 title="This is a tooltip">This is a header</h1>
3. JAVASCRIPT
jQuery(document).ready(function($) {
$('h1').simpletooltip();
});
4. OPTIONS
Default options
|
attribute |
description |
values |
default |
|
position |
position of tooltip in relation with the element |
top, top-left, left-top, left, left-bottom, bottom-left, bottom, bottom-right, right-bottom, right, right-top, top-right |
top |
|
color |
color of text inside the box |
#FFFFFF / 'rgba(255, 255, 255, 0.5)' / 'white' |
#CCCCCC |
|
background_color |
color of background of the box |
#000000 / 'rgba(0, 0, 0, 0.5)' / 'black' |
#222222 |
|
border_color |
color of the box border |
#333333 / 'rgba(80, 80, 80, 0.5)' / 'gray' |
#111111 |
|
border_width |
Width of box border (in pixels) |
4 / 4px / 0 'none' |
0 |
|
arrow_width |
Size of the arrow (in pixels) |
4 / 4px |
6px |
|
fade |
the animation when appears |
true / false |
true |
|
max_width |
limit of the box width |
200 / '200px' |
'200px' |
Global options
You can add it globally, witch affects all tooltips of your queried objects:
<script>
jQuery(document).ready(function($) {
$('.tooltip').simpletooltip({
position: 'right',
border_color: 'purple',
color: '#FFFFFF',
background_color: 'rgba(125,100,230, 0.5)',
border_width: 4
});
});
</script>
Custom options
Or be more specific and override 1 option in 1 tooltip using data attribute:
<h1 class="tooltip" data-simpletooltip-color="#FF0055">my title</h1>
5. POSITIONS
Simpletooltip has 12 funcional positions, by default goes on top position, but you can choose: top top-left left-top left left-bottom bottom-left bottom bottom-right right-bottom right right-top top-right.
To add the desired position, in that example we'will use attribute data-simpletooltip-position.
<div class="simpletooltip" data-simpletooltip-position="right-top">right top</div>
6. THEMES
Themes are packages of options you can set up in one place, Simpletooltip comes with 4 default themes, you can choose: blue white dark gray.
To assign a theme, configure theme parameter with the theme name:
<img src="images/themesample-seablue.png" class="simpletooltip" data-simpletooltip-theme="blue" title="blue theme" />
JS Tutorial
