RipTip - pretty tooltips for RightJS

I’m working on a new version of this blog, in which I want to use RightJS. This week I wanted to add some kind of pretty JavaScript tooltips there; there is a Tooltip class in RightJS, but I don’t like the way these tooltips look. However, I know a jQuery library called “TipTip” which adds very attractive black tooltips. So I took the TipTip code and rewrote it using RightJS (and renamed to RipTip, for obvious reasons) – code is available on GitHub, as usual. This is how the tooltips look: To see them in action, see the original TipTip blog post (my tooltips look exactly the same, or at least they’re supposed to) or this simple test page. Usage You need to download two files, riptip.js and riptip.css and add them to your page header: To attach a RipTip tooltip to an element, give it a title attribute and either call RipTip directly: RipTip.attachTo(link, { options... }); or using a shortcut method added to Element: $('link').riptip({ options... }); $$('a[title]').each('riptip', { options... }); RipTip will remove the title attribute from given elements and will display the contents of that attribute in a custom tooltip. Elements which have tooltips attached to them fire two custom events: riptipEnter when you mouseover an element, before the animation starts, and riptipLeave when the cursor leaves the element and before the fade-out animation starts; you can bind actions to these events like this: $('link').riptip().on({ 'riptipEnter': function() { ... }, 'riptipLeave': function() { ... } }); // or: $('link').riptip().on('riptipEnter', function() { ... }); Options You can pass any of these in the options attribute: maxWidth (default: “200px”) – tooltip’s maximum width edgeOffset (default: 3) – distance between the element’s border and the top of the tooltip’s arrow (in px) delay (default: 400) – amount of time before tooltip appears (in ms) fadeIn (default: 200) – length of the fade in animation (in ms) fadeOut (default: 200) – length of the fade out animation (in ms) Of course you can also tweak the CSS to change the way the tooltips look. If you’d like to make some improvements, or you don’t like the way it works, or you find a bug – feel free to fork it and send me pull requests :)