Información sobre herramientas para celdas en una tabla HTML (sin JavaScript)

¿Es posible tener información sobre herramientas para celdas de tabla sin JavaScript? No puedo usarlo.

¿has probado?

<td title="This is Title">

funciona bien aquí en Firefox v 18 (Aurora), Internet Explorer 8 y Google Chrome v 23x

Si. Puede usar el titleatributo en elementos de celda, con poca usabilidad, o puede usar información sobre herramientas CSS (varias preguntas existentes, posiblemente duplicadas de esta).

La respuesta mejor clasificada de Mudassar Bashir usando el atributo "título" parece la forma más fácil de hacer esto, pero le da menos control sobre cómo se muestra el comentario / información sobre herramientas.

Descubrí que la respuesta de Christophe para una clase de información sobre herramientas personalizada parece dar mucho más control sobre el comportamiento del comentario / información sobre herramientas. Dado que la demostración proporcionada no incluye una tabla, según la pregunta, aquí hay una demostración que incluye una tabla .

Tenga en cuenta que el estilo de "posición" para el elemento padre del intervalo (a en este caso), debe establecerse en "relativo" para que el comentario no empuje el contenido de la tabla cuando se muestra. Me tomó un poco de tiempo darme cuenta de eso.

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

Puede usar css y la pseudopropiedad: hover. Aquí hay una demostración simple . Utiliza el siguiente CSS:

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

Tenga en cuenta que los navegadores más antiguos tienen soporte limitado para: hover.

Una evolución de lo que añadió BioData41 ...

Coloque lo que sigue en estilo 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>

Luego, utilícelo así:

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

En el script Java, se agrega título condicionalmente comparando el valor de los datos. La tabla se genera mediante un script Java de forma dinámica.