Une simple info-bulle avec seulement HTML et CSS

Je veux que mon info-bulle élément (la <span>) au-dessus de tout sur la page mais toujours par rapport à son élément parent (le <td>). Je suis en train d'essayer avec JS mais je voudrais un no-script solution.

JS pour afficher/masquer la <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 pour .tooltip:

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

Actuellement, l'info-bulle s'affiche comme prévu lorsque j'ai passez la souris sur la <td>, mais il apparaît à l'intérieur de l'élément, et donc de changer la taille de la <td> et donc la <tr> et donc l'ensemble de l'dang <table>. Je veux de l'info-bulle apparaît, ainsi, comme les info-bulles: ci-dessus et de ne pas effectuer le reste de la page. z-index ne semble pas le faire seul dans mon cas...

À l'aide de position: fixed au lieu de absolute sur l'info-bulle <span> gardé l'élément d'interrompre le DOM, mais littéralement placé après tout le reste de la page (en bas)

Toute aide est grandement appréciée

La Position doit être absolute ou fixed. Le poste est relative, ce qui aura un effet sur la position des autres relative ou static les éléments en position
Je l'ai essayé à l'aide de relative sur le parent et absolute sur l'info-bulle <span> (et édité la question à préciser). L'info-bulle est toujours interrompre le DOM de flux. À l'aide de fixed fait positionné après tout le reste sur la page

OriginalL'auteur khaverim | 2014-05-15

  1. 14

    J'ai trouvé une méthode pour faire un très léger info-bulle avec pas de 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: (doit être dans cet ordre)

    .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;
}

    Totalement génial et accessoires pour ce mec!

    OriginalL'auteur khaverim

  2. 3

    Juste curieux de savoir quel est le problème avec l'attribut title de la td???

    <td title="If this option is selected, e-mail reminders will be sent to the client before each appointment.">
  Send reminders?
</td>

    OriginalL'auteur Popmedic