Descrizioni comandi per le celle nella tabella HTML (no Javascript)

È possibile avere suggerimenti per le celle della tabella senza JavaScript. Non posso usarlo.

hai provato?

<td title="This is Title">

funziona bene qui su Firefox v 18 (Aurora), Internet Explorer 8 e Google Chrome v 23x

Sì. Puoi usare l' titleattributo sugli elementi delle celle, con scarsa usabilità, oppure puoi usare i tooltip CSS (diverse domande esistenti, possibilmente duplicate di questa).

La risposta con il punteggio più alto di Mudassar Bashir che utilizza l'attributo "title" sembra il modo più semplice per farlo, ma ti dà meno controllo su come viene visualizzato il commento / suggerimento.

Ho scoperto che la risposta di Christophe per una classe di tooltip personalizzata sembra dare molto più controllo sul comportamento del commento / tooltip. Poiché la demo fornita non include una tabella, come da domanda, ecco una demo che include una tabella .

Notare che lo stile di "posizione" per l'elemento genitore dello span (a in questo caso), deve essere impostato su "relativo" in modo che il commento non spinga il contenuto della tabella quando viene visualizzato. Mi ci è voluto un po 'per capirlo.

#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>

Puoi usare css e la pseudo-proprietà: hover. Ecco una semplice demo . Utilizza il seguente css:

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

Tieni presente che i browser meno recenti hanno un supporto limitato per: hover.

Un'evoluzione di quanto aggiunto da BioData41 ...

Posiziona ciò che segue in stile 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>

Quindi, usalo in questo modo:

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

Nello script Java si aggiunge in modo condizionale il titolo confrontando il valore dei dati. La tabella viene generata dinamicamente dallo script Java.