How to create a tooltip on rows? Using Jquery or javascript

How do you a simple tooltip that displays a image and text when you hover over a row? There are many rows and each row should have it owns unique image and text.

My table:

    <div id="tabel">
    <table id="tabel1" border="0" bordercolor="#000000" style="background-color:#FFFFFF" width="700" cellpadding="0" cellspacing="0">
        <tr id="toptr">
          <td>Navn</td>
          <td>Bedommelse</td>
          <td>Vaerdi</td>
          <td>Tid</td>
          <td>Udtraekkes</td>
          <td>Type</td>
       </tr>
       <% end %>
    <% @konkurrancer.each do |vind| %>
       <tr onclick="window.open('<%= vind.tracking %>')" onmouseout="this.style.background='white';" onmouseover="this.style.background='#99ff33';this.style.cursor='pointer'">
          <img src="#" style="display:none"><img><p style="display:none">HOVER TEKST</p>
          <td><%= vind.navn %>开发者_开发知识库;</td>
          <td>4 ud af 5</td>
          <td><%= number_to_currency(vind.vaerdi, :unit => "DKK", :separator => ".", :delimiter => ".", :format => "%n %u", :precision => 0) %></td>
          <td>2 min</td>
          <td>Nyhedsbrev</td>
          <td><%= vind.udtraekkes.strftime("%d %B") %></td>
       </tr>
    <% end %>
    </table>

---

Try here. Just made a quick mashup with same example using the same code on the site.

---

This uses jQuery:

$('tr').hover(function()
{
  $(this).css('background-image', "url('foo.png')");
}, function() {
  $(this).css('background-image', 'none');
});

You'd have to add some more code to make it not repeat and align it.

As for the text, you could cheat and make it an image, but that's a bit hacky. I'd actually make a hidden div with absolute positioning and make it appear whenever you hover.

---

Are you after tooltips, perhaps? Using jQuery, here is a sample of some tooltips you could use to display text and images (you'd create them in a div and then use CSS to show it).