Create simple hints with HTML and CSS only

Question

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

JS to show / hide <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;
    }

, , <td>, , <td> , , <tr> , , dang <table>. , , , : . z-index, , ...

position: fixed absolute <span> DOM, ()

Answer 1

JS!

HTML:

<td class="ht">Send reminders?
<span class="tooltip">this is the tooltip alshdgwh gahfguo 
wfhg fghwoug wugw hgrwuog hwaur guoarwhg rwu</span>
</td>

CSS: ( )

.ht:hover .tooltip {
    display:block;
}

.tooltip {
    display: none;
    color: red;
    margin-left: 28px; /* moves the tooltip to the right */
    margin-top: 15px; /* moves it down */
    position: absolute;
    z-index: 1000;
}

!