How do you search a table for a definition to a word in jQuery?

Question

This is a little hard to explain, but I have an HTML table, full of SQL definitions, that cross-talk a great deal. For example, one is talking about "INSERT statements", and mentions a "unique key". Another one of the rows talks about unique keys.

I'd like to create little definition bubble (when you hover over "unique key" in the INSERT row) with the definition from the appropriate row. I was planning on using jQuery, but I'm open to alternatives. Any ideas?

UPDATE: My code is here

Answer 1

jQuery should work just fine for this task. Store the value for the definition bubble somewhere out of sight and use jQuery to pop it up when you hover.

Answer 2

instead of parsing the HTML directly, maybe you can give each <tr/> an id that can be used to find the definition. conversely, if you'd like more control over which text triggers the bubble, wrap the words in a <span /> with an id.

jt

Answer 3

There are a few jQuery tooltip plug-ins (which is really what you're after). Personally I've been using jQuery Tooltip and am happy with it. I've used it to put some pretty complex content in a tooltip.

I don't fully understand the rest of your question. Do you want this to happen automatically? Is the table present on the page? Is server side code creating the definition bubbles?

Now jQuery Tooltip has a bodyHandler attribute where you can supply a callback (function) that'll define the content of the tooltip so that bit's fine. Do you want these links/tips automatically created though?

EDIT: Take a look at this highlight plug-in as well. Even if you don't use it you can copy the methods for finding text in your document and wrapping elements around them. Something like:

$(function() {
  $("table.definitions th").each(function() {
    var term = $(this).text();
    var definition = $(this).nextSibling().text(); // assuming it's in a <td> in the same row
    // find all occurrences of 'term' in relevant text block
    // and wrap in <span class="term" title="definition">...</span>
  });
});

Then optinoally use jQuery Tooltip to make a more modern tooltip out of that title.