Las hojas de estilo en cascada, conocidas con cariño como CSS, son un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web estén presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web. CSS es fácil de aprender y comprender, pero brinda un poderoso control sobre la presentación de un documento HTML.
En este artículo, aprenderemos cómo agregamos una información sobre herramientas a un elemento de intervalo .
Información sobre herramientas: una información sobre herramientas es un mensaje de texto y se coloca dentro de un elemento en línea con class=”tooltiptext”. El elemento HTML <span> es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.
Clases utilizadas:
- información sobre herramientas: esta clase se utiliza para proporcionar texto visible.
- texto de información sobre herramientas : esta clase se utiliza para proporcionar visibilidad cuando alguien pasa el cursor sobre el contenido de la clase de información sobre herramientas.
Acercarse:
- Primero, cree un archivo HTML con algunas propiedades CSS.
- Agrega un elemento span a tu página web.
- En el último paso, agregue la clase de información sobre herramientas y la clase de texto de información sobre herramientas a la página web.
Ejemplo 1: El siguiente ejemplo demuestra las clases de información sobre herramientas. Hemos utilizado texto de información sobre herramientas, lo que significa que cada vez que pasa el cursor sobre el texto, se mostrará el texto oculto. La visibilidad de CSS está configurada como «oculta» inicialmente en la parte de estilo del código HTML. En la misma parte, se menciona que si el usuario pasa el mouse sobre él, la propiedad de visibilidad se establece en «visible», lo que hace que parezca que se agrega una información sobre herramientas.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:black;
color: white;
}
.tooltip
{
position: relative;
display: inline-block;
border-bottom: 2px solid black;
}
.tooltip .tooltiptext
{
visibility: hidden;
width: 100px;
background-color: green;
color: lightgreen;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext
{
visibility: visible;
}
</style>
</head>
<body>
<center>
<h1 style="color:green"> GeeksforGeeks </h1>
<h3> How do I add a tool tip to a span element? </h3>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">This is tooltiptext.</span>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, usaremos texto de información sobre herramientas con botones. En palabras simples, cada vez que pase el mouse sobre el botón, se mostrará la funcionalidad de ese botón.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:black;
color: white;
}
.tooltip
{
position: relative;
display: inline-block;
border-bottom: 2px solid black;
}
.tooltip .tooltiptext
{
visibility: hidden;
width: 100px;
background-color: green;
color: lightgreen;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext
{
visibility: visible;
}
</style>
</head>
<body>
<center>
<h1 style="color:green"> GeeksforGeeks </h1>
<h3> How do I add a tool tip to a span element? </h3>
<p>Move the mouse over the text below:</p>
<button class="tooltip">CUT image
<span class="tooltiptext">
This button is used to cut an image
</span>
</button>
<button class="tooltip">CROP image
<span class="tooltiptext">
This is used to crop the image
</span>
</button>
<button class="tooltip">GiF image
<span class="tooltiptext">
This is used to convert an image to GiF
</span>
</button>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA