I recently came across Davey Shafik’s nice little Tooltip.js script – and I love it. I love it so much that I’m adding it as context-sensitive help all over the site I’m building. My needs are fairly simple: just some sort of pseudo-icon I can use next to any visual element to show that help or warning information is available. Every aspect can (of course!) be styled any way you want it.
To gain consistency and ease of use I wrote something that isn’t an actual Rails plug-in but is more of a… drop-in. Just drop in three files and you’re ready to roll. There are a few ways to add the tips to your views, but the easiest way is to just add
<%= Tooltip.help name %>
or
<%= Tooltip.alert name %>
to show a highlighted icon. The ones I currently use are html pseudo-icons (? for help and ! for warnings) but they can just as easily be image tags (and will be, as soon as I can find some appropriate icons).
Finally, to get the tip data to be formatted into hidden divs you need to add this to the bottom of your view (or, ideally, your layout):
<%= Tooltip.content %>
Thats nearly all there is to it. The only remaining task is to add these three files:
public/javascripts/Tooltip.js |
Davey’s code. |
/lib/tooltip.rb |
My code. |
/config/tooltips.yaml |
Styles and the tip contents. |
Eventually I’ll make it publicly available, but if you’d like a copy sooner just send me a note at my gmail address: john dot baylor.