Question

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>

Answer 1

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