web-dev-qa-db-fra.com

Infobulles pour les cellules dans un tableau HTML (pas de Javascript)

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

javascripthtml-table
97
dublintech

as-tu essayé?

<td title="This is Title">

cela fonctionne bien ici sur Firefox v 18 (Aurora), Internet Explorer 8 et Google Chrome v 23x

157
Mudassar Bashir

Oui. Vous pouvez utiliser l'attribut title sur des éléments de cellule peu utilisables, ou vous pouvez utiliser les info-bulles CSS (plusieurs questions existantes, éventuellement des doublons de celle-ci).

16
Jukka K. Korpela

La réponse la mieux classée de Mudassar Bashir utilisant l'attribut "title" semble être le moyen le plus simple de le faire, mais elle vous donne moins de contrôle sur la façon dont le commentaire/l'info-bulle est affiché.

J'ai trouvé que la réponse de Christophe pour une classe d'info-bulle personnalisée semble donner beaucoup plus de contrôle sur le comportement du commentaire/info-bulle. Puisque la démo fournie n'inclut pas de table, comme pour la question, voici ne démo qui inclut une table .

Notez que le style "position" de l'élément parent de la plage (un dans ce cas) doit être défini sur "relatif" pour que le commentaire ne transmette pas le contenu de la table lors de son affichage. 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>
14
BioData41

Vous pouvez utiliser css et la pseudo-propriété: hover. Voici un démo 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 navigateurs plus anciens ont un support limité pour: hover.

5
Christophe

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>
2
BR1COP