Есть такая таблица:
<table border="1" width="700px">
<tr>
<td class='name-product' name="name-product-001">
какой-то непонятный текст
<div class='tooltip-product' name="tooltip-product-001">
Что-то написано <br> в несколько <br> строк.
</div>
</td>
</tr>
<tr>
<td class='name-product' name="name-product-002">
какой-то непонятный текст
<div class='tooltip-product' name="tooltip-product-002">
Что-то написано <br> в несколько <br> строк.
</div>
</td>
</tr>
<tr>
<td class='name-product' name="name-product-003">
какой-то непонятный текст
<div class='tooltip-product' name="tooltip-product-003">
Что-то написано <br> в несколько <br> строк.
</div>
</td>
</tr>
</table>
Стилями и jquery div в каждой строке скрыт Нужно, чтобы при наведении на строку div из неё появлялся поверх всей таблицы, а при наведении на div или уходе из ячейки - прятался.
Мои попытки тут: http://jsfiddle.net/bahdpv62/7/ Всё прячется и появляется, но под элементами таблицы.
Помогите разобраться.