I'm working on implementing a tooltip feature that will appear when hovering over a row with extensive HTML content. This feature is intended to be used alongside Foundation framework. However, I am encountering issues getting the tooltip to work properly within an HTML table row. Any assistance would be appreciated.
Here is the sample HTML code:
<table>
<tbody>
<tr class="hover">
<div class="tooltip">asdadasd
</div>
<td>nothing</td>
<td>nothing</td>
<td>nothing</td>
<td>nothing</td>
<td>nothing</td>
</tr>
</tbody>
</table>
Alternatively:
<table>
<tbody>
<div class="hover">
<tr>jhk
<div class="tooltip">asdadasd
</div>
<td>nothing</td>
<td>nothing</td>
<td>nothing</td>
<td>nothing</td>
<td>nothing</td>
</tr>
</div>
</tbody>
</table>
This snippet of HTML can also be viewed in action on JSFiddle.
<div class="hover">
jhk
<div class="tooltip">asdadasd
</div>
</div>
Below is the corresponding CSS for styling:
.hover {
position: relative;
top: 50px;
left: 50px;
}
.tooltip {
top: -10px;
background-color: black;
color: white;
border-radius: 5px;
opacity: 0;
position: absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.hover:hover .tooltip {
opacity: 1;
}
Please note that the CSS provided here is identical to the styles used in the examples above.