{
  "$type": "site.standard.document",
  "description": "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.\n\nThis is how the tooltips look:\n\nTo 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.\n\nUsage\n\nYou need to download two files, riptip.js and riptip.css and add them to your page header:\n\n<link rel=\"stylesheet\" href=\"stylesheets/riptip.css\" type=\"text/css\">\n<script type=\"text/javascript\" src=\"javascripts/riptip.js\"></script>\n\nTo attach a RipTip tooltip to an element, give it a title attribute and either call RipTip directly:\n\nRipTip.attachTo(link, { options... });\n\nor using a shortcut method added to Element:\n\n$('link').riptip({ options... });\n$$('a[title]').each('riptip', { options... });\n\nRipTip will remove the title attribute from given elements and will display the contents of that attribute in a custom tooltip.\n\nElements 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:\n\n$('link').riptip().on({\n  'riptipEnter': function() { ... },\n  'riptipLeave': function() { ... }\n});\n\n// or:\n$('link').riptip().on('riptipEnter', function() { ... });\n\nOptions\n\nYou can pass any of these in the options attribute:\n\nmaxWidth (default: “200px”) – tooltip’s maximum width\nedgeOffset (default: 3) – distance between the element’s border and the top of the tooltip’s arrow (in px)\ndelay (default: 400) – amount of time before tooltip appears (in ms)\nfadeIn (default: 200) – length of the fade in animation (in ms)\nfadeOut (default: 200) – length of the fade out animation (in ms)\n\nOf course you can also tweak the CSS to change the way the tooltips look.\n\nIf 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 :)",
  "path": "/2010/02/11/riptip-pretty-tooltips-for-rightjs/",
  "publishedAt": "2010-02-11T20:36:43Z",
  "site": "at://did:plc:oio4hkxaop4ao4wz2pp3f4cr/site.standard.publication/3mn5mackuba26",
  "tags": [
    "JavaScript",
    "Frontend"
  ],
  "textContent": "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.\n\nThis is how the tooltips look:\n\nTo 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.\n\nUsage\n\nYou need to download two files, riptip.js and riptip.css and add them to your page header:\n\n<link rel=\"stylesheet\" href=\"stylesheets/riptip.css\" type=\"text/css\">\n<script type=\"text/javascript\" src=\"javascripts/riptip.js\"></script>\n\nTo attach a RipTip tooltip to an element, give it a title attribute and either call RipTip directly:\n\nRipTip.attachTo(link, { options... });\n\nor using a shortcut method added to Element:\n\n$('link').riptip({ options... });\n$$('a[title]').each('riptip', { options... });\n\nRipTip will remove the title attribute from given elements and will display the contents of that attribute in a custom tooltip.\n\nElements 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:\n\n$('link').riptip().on({\n  'riptipEnter': function() { ... },\n  'riptipLeave': function() { ... }\n});\n\n// or:\n$('link').riptip().on('riptipEnter', function() { ... });\n\nOptions\n\nYou can pass any of these in the options attribute:\n\nmaxWidth (default: “200px”) – tooltip’s maximum width\nedgeOffset (default: 3) – distance between the element’s border and the top of the tooltip’s arrow (in px)\ndelay (default: 400) – amount of time before tooltip appears (in ms)\nfadeIn (default: 200) – length of the fade in animation (in ms)\nfadeOut (default: 200) – length of the fade out animation (in ms)\n\nOf course you can also tweak the CSS to change the way the tooltips look.\n\nIf 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 :)",
  "title": "RipTip - pretty tooltips for RightJS",
  "updatedAt": "2025-06-30T01:49:16Z"
}