Get it!
Tooltips
Right tooltips is the native tooltips feature for RightJS.
Get the latest version right here
- right-tooltips.js - minified version
- right-tooltips-src.js - source code
All the source code of the project is available under terms of the MIT license
http://github.com/rightjs/rightjs-ui/tree/master/src/tooltips/
For some standard usage examples see the demo page
Index
top ↑Usage Basics
There is nothing special about it. You just include the source file
<script src="/javascripts/right-tooltips.js"></script>
Then specify the data-tooltip attribute on your elements where you want the tooltips to appear and RightJS will generate them when the page is loaded
top ↑Options List
There are some options you can customize
| Name | Default | Description |
|---|---|---|
| fxName | ‘fade’ | the appearance fx name |
| fxDuration | 400 | the visual effect duration |
| delay | 400 | the tooltip appearance delay |
| idSuffix | ‘-tooltip’ | the tooltip ids suffix |
| cssRule | ‘[data-tooltip]’ | automatically initializeable tooltips rule |
| move | true | a marker if the tooltip should be moving with the mouse |
In order to change the options alter the Tooltip.Options object, like this
$ext(Tooltip.Options, {
delay: 200,
fxname: null
});
top ↑Style Adjustments
The tooltip elements have the following simple structure
<div class="rui-tooltip">
<div class="rui-tooltip-arrow"></div>
<div class="rui-tooltip-container">
// your data is here
</div>
</div>
If the original element has an id attribute then related tooltip will have similar id with the -tooltip suffix, so that you could style it separately if you need.