Zone de texte 'popup' affichage sur mouseover/hover CSS/Javascript

J'ai un html td élément de texte à l'intérieur. Je veux qu'il sorte que vous pouvez passer la souris sur l'élément et afficher une zone de texte en haut de la page active/élément expliquant ce que td contenu de l'étiquette de moyens. Une sorte d'élaboration. Comme le <abbr> tag.

Cela peut être fait en CSS ou Javascript?

InformationsquelleAutor DextrousDave | 2012-03-22
  1. 10

    C'est possible avec les CSS, également avec javascript. Créer une table avec un élément:

    <table>
<tr><td>
    <a href="#">Info
        <div class="tooltipcontainer">
            <div class="tooltip">Here some info</div>
        </div>
    </a>
</td></tr>
</table>

    CSS:

    /* Container is necessary because td cannot be positioned relative */
td .tooltipcontainer {
    position: relative;
}
td .tooltip {
    display: none;
    position: absolute;
    /* More positioning, heigh, width, etc */
}
td a:hover .tooltip {
    display: block;
}

    Lorsque vous passez la souris sur "Info", il affichera le texte dans le div avec la class='tooltip'. JavaScript (par exemple jQuery plugin tooltip) a des solutions avec plus d'options.

    • Ce serait mieux pour la convivialité tbh
    • Je vous remercie. C'était le genre de CSS solution que je cherchais. Je ne pense cependant la solution d'activer Javascript a plus d'avantages.
    InformationsquelleAutor Frank van Wijk
  2. 3

    Exemple de balisage..

    <td id="1">..</td>
<td id="2">..</td>
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td>

    De Style CSS

    .visible {
  display:block;
}

.hidden {
  display:none;
}

    vous pouvez

    $('#thisiswhatiwanttohaveahover').hover(function() {
  if ($(this + ' .tooltip').hasClass('hidden')) {
    $(this + ' .tooltip').removeClass('hidden');
    $(this + ' .tooltip').addClass('visible');
  }
  if ($(this + ' .tooltip').hasClass('visible')) {
    $(this + ' .tooltip').removeClass('visible');
    $(this + ' .tooltip').addClass('hidden');
  }
});

    espère que cela aide..

    InformationsquelleAutor Teody C. Seguin
  3. 2

    J'ai utilisé Info-bulle JS avant. Il a vraiment bien travaillé et je pense qu'il pourrait être bénéfique pour vous.

    InformationsquelleAutor mickburkejnr