Info-bulles pour les cellules d'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.

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

Oui. Vous pouvez utiliser l' titleattribut sur des éléments de cellule, avec une faible convivialité, ou vous pouvez utiliser des info-bulles CSS (plusieurs questions existantes, éventuellement des doublons de celle-ci).

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 cela 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. Étant donné que la démo fournie n'inclut pas de tableau, selon la question, voici une démo qui comprend un tableau .

Notez que le style "position" de l'élément parent de l'étendue (a dans ce cas) doit être défini sur "relative" afin que le commentaire ne pousse 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>

Vous pouvez utiliser css et la pseudo-propriété: hover. Voici une simple démo . 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 ont une prise en charge limitée pour: hover.

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>

if (data[j] =='B'){
    row.cells[j].title="Basic";
}

Dans le script Java, l'ajout conditionnel du titre en comparant la valeur de Data. La table est générée dynamiquement par un script Java.