Making a simple tooltip with only HTML and CSS

Question

I want my tooltip element (the <span>) to appear above everything on the page but still relative to its parent element (the <td>). I'm trying with JS but would like a no-script solution.

JS to show/hide the <span>:

window.AETid = "AE";

        function tooltip(tid) {
         document.getElementById(tid).style.display="block";
        }

        function hideTooltip(tid) {
         document.getElementById(tid).style.display="none";
        }

HTML:

<td class="ht" onmouseover="tooltip(window.AETid);" onmouseout="hideTooltip(window.AETid);">
Send reminders?
<span class="tooltip" id="AE">If this option is selected, e-mail reminders will be sent to the client before each appointment.</span>
</td>

CSS for .tooltip:

.ht { position: relative; }
    .tooltip {
        color: #ff0000;
        display: none;
        z-index: 100;
        position: absolute;
        right:0px;
        bottom: 0px;
    }

Currently, the tooltip appears as expected when I hover over the <td>, but it appears within the element, thus changing the size of the <td> and thus the <tr> and thus the whole dang <table>. I want the tooltip to appear, well, like tooltips do: above and not effecting the rest of the page. z-index doesn't seem to do it alone in my case...

Using position: fixed instead of absolute on the tooltip <span> kept the element from interrupting the DOM, but literally positioned it after everything else on the page (at the bottom)

All help is greatly appreciated

Answer 1

Try this its simple and compact, I made it myself

.info:hover .tooltip {
  color: red;
  visibility: visible;
  opacity: 1;
  transition: opacity 1s
}
.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s
}
}
.tooltip:hover {
  visibility: visible
}

.info {
cursor: help
}

<span class="info">Text<span class="tooltip">MSG</span></span>