Tooltips

Right tooltips is the native tooltips feature for RightJS.

Get the latest version right here

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

NameDefaultDescription
fxName‘fade’the appearance fx name
fxDuration400the visual effect duration
delay400the tooltip appearance delay
idSuffix‘-tooltip’the tooltip ids suffix
cssRule‘[data-tooltip]’automatically initializeable tooltips rule
movetruea 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.