Click on word and get the definition...?

Question

I am looking to have a user click on a word and a tip shows up above the word showing the definition. The definitions will come from a glossary of words we already have. We are using Ruby and Jquery for the site.

Any suggestions or a finger pointing in a direction?

Answer 1

If you're using jQuery then attach a click or hover event to the words container. So if you have <div class="WordDef">Word</div> then you attach like;

$('.WordDef').click(function(){ 
  var word = $(this).text(); 
  //do postback to get definition then show definition 
})

Showing the definition might make another div visible that contains the definition of the word.

$('.DivDefinition').text("Definition of word from jQuery ajax postback");
$('.DivDefinition').show();

Consider using a jQuery plugin that will give you a tooltip look that you can place where the mouse was when it was clicked.

Edit

I found this link which might help you do an Ajax postback in rails. I'm not a rails developer so unsure if this will help.

http://jimneath.org/2008/06/18/using-jquery-with-ruby-on-rails/

Answer 2

Your post inspired me to opensource a plugin we use based on the tipTip plugin.

Its easy to pop open a tool tip by the mouse from a click event:

$("#example").click(function(e){ $.tipTipLite('some content loaded using jQuery, not from markup', {mouse_event: e}); return false; });

You can check it out on github: http://github.com/ubermajestix/tipTipLite/

Answer 3

Personally, I would wrap the word in a span tag, and include the definition as part of the title attribute. That way, users without javascript will still get a default tooltip. Making the whole thing much better from an accessibility perspective. For example:

<span title="Once in a while">Sporadic</span>

Then you can use your tooltip plugin of choice - like qtip (which uses the title attribute by default), and do something like this:

$('a[title]').qtip({ style: { name: 'cream', tip: true } })