Features:
- minimal configuration
- highly customizable: options and themes
- no extra html structures, use "title" attribute
- 12 functional positions
- cross-browser
- lightweight: less than 7Kb
Installation:
Download the plugin and decompress files, put the folder simpletooltip in your tree project files, would be nice create a folder that contains it, for example js (/js/simpletooltip).
In the header of your document attach the scripts
<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>
Usage
To initialize the plugin you have 2 options:
Using data attribute
First declare
<h1 data-simpletooltip="init" title="This is a tooltip">This is a header</h1>
Using JavaScript
You can use the jquery function
<h1 title="This is a tooltip">This is a header</h1>
<script>
jQuery(document).ready(function($) {
$('h1').simpletooltip();
});
</script>
Simpletooltip was thought for use small and descriptive texts in order to substitute the ugly yellow tooltip that browsers offers by default. Anyway, you can insert more complex content like linebreaks, lists, images, etc...
<h1 data-simpletooltip="init" title="<img src='icon.png'>">image</h1>
♣ example
You can use images or graphics using custom fonts.
Options:
You can add some options to customize your tooltips. This options works in cascade, that means you can override them. Here, the priorities:
- The default options will be applied at first instance.
- Your global options will override the default ones.
- Your theme options will override the global ones
- All data attributes will override the rest.
Default options
attribute | description | values | default |
---|---|---|---|
position of tooltip in relation with the element |
|
||
color of text inside the box |
|
||
color of background of the box |
|
||
color of the box border |
|
||
Width of box border (in pixels) |
|
||
Size of the arrow (in pixels) |
|
||
the animation when appears |
|
||
limit of the box width |
|
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>
Positions:
Simpletooltip has 12 funcional positions, by default goes on
To add the desired position, in that example we'will use attribute
<div class="simpletooltip" data-simpletooltip-position="right-top">right top</div>
♣ example:
Themes
Themes are packages of options you can set up in one place, Simpletooltip comes with 4 default themes, you can choose:
To assign a theme, configure
<img src="images/themesample-seablue.png" class="simpletooltip" data-simpletooltip-theme="blue" title="blue theme" />
♣ example:
Also you can extend it, imagine a blue theme without border:
<p data-simpletooltip="init" data-simpletooltip-theme="blue" data-simpletooltip-border-width="0" title="blue custom theme">blue theme customized<p>
♣ example:
This is a customized blue theme without border.
Creating Themes
Also you can create your own themes. Imagine you need to repeat continuously 2 schemes in your site and don't want to fill your html code with noisy variables inside data attributes. For that you can use
<script>
jQuery(document).ready(function($) {
$('.tooltip').simpletooltip({
themes: {
pink: {
color: 'red',
border_color: 'red',
background_color: 'pink',
border_width: 4
},
brazil: {
color: 'yellow',
background_color: 'green',
border_color: 'yellow',
border_width: 4
}
}
});
});
</script>
♣ example:
This is a pink example, and this is a green one.
Actual Version: 1.3.0
Latest Update: 11.06.2014
Also, you can access to the Github repo.
Do you have any great idea?
Contribute on Github issues
Simpletooltip helped you?
donate ☺