I want my tooltip element (the <span>) to appear above everything on the page but still relative to its parent element (the <td>).
JS to show/hide the <span>:
window.AETid = "AE";
function tooltip(tid) {
console.log('run the tooltip...id: '+tid);
document.getElementById(tid).style.display="block";
}
function hideTooltip(tid) {
document.getElementById(tid).style.display="none";
}
HTML:
<td onmouseover="tooltip(window.AETid);" onmouseout="hideTooltip(window.AETid);">
Send reminders?
<span class="tooltip" id="AE">this is the tooltip</span>
</td>
CSS for .tooltip:
.tooltip {
color: #ff0000;
display: none;
z-index: 100;
position: relative;
right:0px;
bottom: 0px;
}
Currently, the tooltip appears as expected when I hover over the <td>, but it appears within the <td> element, thus changing the size of the <td> and thus the <tr> and thus the <table>. I want the tooltip to appear, well, like tooltips to: above and not effecting the rest of the page. z-index doesn't seem to do it alone in my case...
All help is greatly appreciated