La información sobre herramientas muestran este texto (u otro contenido) cuando se pasa sobre un elemento HTML.
Información sobre la herramienta en línea de texto
Coloque el cursor sobre la frase de abajo!
9 millones de Londres es la capital de Inglaterra.
La clase W3-información de herramienta define el elemento HTML que se ciernen sobre (contenedor de información sobre herramientas).
La clase W3-texto define el texto de sugerencia:
Ejemplo
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> Inténtalo tú mismo " Información sobre la herramienta en línea Etiqueta
Coloque el cursor sobre la frase de abajo!
9 millones de Londres es la capital de Inglaterra.
La clase W3-información de herramienta define el elemento HTML que se ciernen sobre (contenedor de información sobre herramientas).
La clase W3-texto define el texto de sugerencia:
Ejemplo
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> Inténtalo tú mismo " gran Tooltip
Pase el ratón sobre la imagen para ver el efecto:
Un coche es un vehículo de motor con ruedas, con alimentación propia para el transporte. La mayoría de las definiciones del término especificar que los coches tienen típicamente cuatro ruedas. (Wikipedia)
La clase W3-información de herramienta define el elemento HTML que se ciernen sobre (contenedor de información sobre herramientas).
La clase W3-texto define el texto de sugerencia:
Ejemplo (texto antes de la imagen)
<div class="w3-tooltip">
<p
class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
<img src="img_car.jpg"
alt="Car" style="width:100%">
</div> Inténtalo tú mismo " Ejemplo (texto después de la imagen)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car" style="width:100%">
<p
class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
</div> Inténtalo tú mismo " Información sobre la herramienta absoluta
Si desea la información sobre herramientas que aparezca en una posición absoluta, posicionar el texto de sugerencia (W3-texto):
Ejemplo
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p> Inténtalo tú mismo " Información sobre la herramienta de color
Si desea una información de herramientas de color, utilice las clases w3-color:
Información sobre la herramienta redondeada
Si desea una información sobre herramientas redondeada, utilizar las clases W3-redondas:
Pequeño Tooltip
Si quieres una pequeña información sobre herramientas, utilice la clase W3-pequeña:
Información sobre la herramienta pequeña
Si quieres una pequeña información sobre herramientas, utilice la clase W3-minúscula:
gran Tooltip
Si desea una gran información sobre herramientas, utilizar las clases W3-grande: