tablas - Información sobre herramientas para celdas en la tabla HTML(no javascript)

tablas dinamicas html javascript

Question

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

Answer 1

¿has probado?

<td title="This is Title">

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

Answer 2

La respuesta mejor clasificada por Mudassar Bashir utilizando el atributo "título" parece la forma más fácil de hacerlo, 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 tener 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 principal del tramo (a en este caso), debe establecerse en "relativo" para que el comentario no presione el contenido de la tabla cuando se muestre. 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>

Answer 3

Puede usar css y la propiedad de pseudovuelo: flotar. 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 antiguos tienen soporte limitado para: hover.

Answer 4

Sí. Puede usar el atributo de title en elementos de celda, con poca usabilidad, o puede usar información sobre herramientas CSS (varias preguntas existentes, posiblemente duplicados de esta).

Answer 5

Una evolución de lo que BioData41 agregó ...

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>

Entonces, úsalo 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>