Infobulles pour les cellules d'un tableau HTML (sans Javascript)

Question

Est-il possible d'avoir des infobulles pour les cellules d'un tableau sans JavaScript ? Je ne peux pas l'utiliser.

Answer 1

Avez-vous essayé ?

<td title="This is Title">

Cela fonctionne bien ici avec Firefox v 18 (Aurora), Internet Explorer 8 et Google Chrome v 23x.

Answer 2

La réponse la mieux classée de Mudassar Bashir, qui utilise l'attribut "title", semble être le moyen le plus simple d'y parvenir, mais elle vous donne moins de contrôle sur l'affichage du commentaire/de l'info-bulle.

J'ai trouvé que la réponse de Christophe pour une classe de tooltip personnalisée semble donner beaucoup plus de contrôle sur le comportement du commentaire/tooltip. Puisque la démo fournie n'inclut pas de tableau, comme le demandait la question, voici ce que j'ai trouvé. une démo qui comprend un tableau .

Notez que le style "position" de l'élément parent du span (a dans ce cas) doit être défini sur "relatif" afin que le commentaire ne déplace pas le contenu du tableau lorsqu'il est affiché. Il m'a fallu un peu de temps pour comprendre cela.

#MyTable{
  border-style:solid;
  border-color:black;
  border-width:2px
}

#MyTable td{
  border-style:solid;
  border-color:black;
  border-width:1px;
  padding:3px;
}

.CellWithComment{
  position:relative;
}

.CellComment{
  display:none;
  position:absolute; 
  z-index:100;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:red;
  padding:3px;
  color:red; 
  top:20px; 
  left:20px;
}

.CellWithComment:hover span.CellComment{
  display:block;
}

<table id="MyTable">
  <caption>Cell 1,2 Has a Comment</caption>
  <thead>
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
  </thead>
  <tbody>
    <tr></tr>
      <td>Cell 1,1</td>
      <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,3</td>
    <tr>
      <td>Cell 2,1</td>
      <td>Cell 2,2</td>
      <td>Cell 2,3</td>
    </tr>
  </tbody>
</table>

Answer 3

Oui. Vous pouvez utiliser le title sur les éléments de cellule, ce qui n'est pas très pratique, ou vous pouvez utiliser des infobulles CSS (plusieurs questions existantes, peut-être des doublons de celle-ci).

Answer 4

Vous pouvez utiliser le CSS et la pseudo-propriété :hover. Voici un exemple de Une démonstration simple . Il utilise le css suivant :

a span.tooltip {display:none;}
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;}

Notez que les anciens navigateurs ne prennent que peu en charge la fonction :hover.

Answer 5

Une évolution de ce que BioData41 a ajouté...

Placez ce qui suit dans le style CSS

     <style>

        .CellWithComment{position:relative;}

        .CellComment
        {
            visibility: hidden;
            width: auto;
            position:absolute; 
            z-index:100;
            text-align: Left;
            opacity: 0.4;
            transition: opacity 2s;
            border-radius: 6px;
            background-color: #555;
            padding:3px;
            top:-30px; 
            left:0px;
        }   
        .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;}
</style>

Ensuite, utilisez-le comme ceci :

        <table>
            <tr>
                <th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th>Opened</th>
                <th>Event</th>
                <th>Severity</th>           
                <th>Id</th>
                <th>Component Name</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>