Dada una tabla HTML y la tarea es agregar una información sobre herramientas a la celda de la tabla sin usar JavaScript. Hay dos métodos para resolver este problema que se discuten a continuación:
Enfoque 1:
- Crea una tabla HTML.
- Agregue el atributo de título (título = «someTitle») a la celda de la tabla para agregar información sobre herramientas.
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to add tooltip to HTML table
cell without using JavaScript ?
</title>
<style>
#MyTable{
border: 1px solid black;
}
#MyTable td{
border: 1px solid black;
padding: 3px;
}
</style>
</head>
<body align = "center">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<center>
<table id="MyTable">
<thead>
<tr>
<td>Attr 1</td>
<td>Attr 2</td>
<td>Attr 3</td>
</tr>
</thead>
<tbody>
<tr>
<td title="1, 1">1, 1</td>
<td title="1, 2">1, 2</td>
<td title="1, 3">1, 3</td>
</tr>
<tr>
<td title="2, 1">2, 1</td>
<td title="2, 2">2, 2</td>
<td title="2, 3">2, 3</td>
</tr>
</tbody>
</table>
</center>
<script>
var el_up = document.getElementById('GFG_UP');
el_up.innerHTML = "Hover over the cells "
+ "to see the tooltip.";
</script>
</body>
</html>
Producción:
- Antes de pasar el cursor sobre la celda:
- Después de pasar el cursor sobre la celda:
Enfoque 2:
- Crea una tabla HTML.
- Cree un elemento <span> en la celda de la tabla en la que queremos agregar una información sobre herramientas.
- Configure inicialmente la visualización: ninguno del elemento <span>.
- Cada vez que el usuario se desplaza sobre este elemento en particular, simplemente cambie la propiedad para mostrar: bloque .
Ejemplo 2: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to add tooltip to HTML table
cell without using JavaScript ?
</title>
<style>
#MyTable{
border: 1px solid black;
}
#MyTable td{
border: 1px solid black;
padding: 3px;
}
.parentCell{
position: relative;
}
.tooltip{
display: none;
position: absolute;
z-index: 100;
border: 1px;
background-color: white;
border: 1px solid green;
padding: 3px;
color: green;
top: 20px;
left: 20px;
}
.parentCell:hover span.tooltip{
display:block;
}
</style>
</head>
<body align = "center">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
Hover over the 1, 2 to see the tooltip.
</p>
<center>
<table id="MyTable">
<thead>
<tr>
<td>Attr 1</td>
<td>Attr 2</td>
<td>Attr 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1, 1</td>
<td class="parentCell">1, 2
<span class="tooltip">Tooltip</span>
</td>
<td>1, 3</td>
<tr>
<td>2, 1</td>
<td>2, 2</td>
<td>2, 3</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Producción:
- Antes de pasar el cursor sobre la celda:
- Después de pasar el cursor sobre la celda:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA