Información sobre herramientas de W3.CSS
Pase el cursor sobre las siguientes oraciones:
Londres es la capital de Inglaterra.(9 million inhabitants)
Londres 9 million inhabitants es la capital de Inglaterra.
Clases de información sobre herramientas de W3.CSS
W3.CSS proporciona las siguientes clases de información sobre herramientas:
| Clase | define |
|---|---|
| w3-información sobre herramientas | El elemento de información sobre herramientas |
| w3-texto | El texto de información sobre herramientas |
Elemento de información sobre herramientas y Texto de información sobre herramientas
La información sobre herramientas muestra texto (u otro contenido) cuando se desplaza sobre un elemento HTML.
La clase w3-tooltip define el elemento sobre el que se desplaza el cursor (el contenedor de información sobre herramientas).
La clase w3-text define el texto de información sobre herramientas.
Coloca el cursor sobre la siguiente oración:
Londres es la capital de Inglaterra.(9 million inhabitants)
Ejemplo
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Información sobre herramientas como una etiqueta
Coloca el cursor sobre la siguiente oración:
Londres 9 million inhabitants es la capital de Inglaterra.
Ejemplo
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Información sobre herramientas de imagen
Pase el cursor sobre esta imagen para ver el efecto:
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)
Ejemplo (texto antes de la imagen)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Ejemplo (texto después de la imagen)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Información sobre herramientas posicionada absoluta
Si desea que la información sobre herramientas aparezca en una posición absoluta, coloque el texto de información sobre herramientas con CSS:
Ejemplo
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
Información sobre herramientas de color
Si desea una información sobre herramientas de color, use las clases de color w3 :
Ejemplo
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Información sobre herramientas redondeada
Si desea una información sobre herramientas redondeada, use las clases w3- round :
Ejemplo
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Pequeña información sobre herramientas
Si desea una pequeña información sobre herramientas, use la clase w3-small :
Ejemplo
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Pequeña información sobre herramientas
Si desea una pequeña información sobre herramientas, use la clase w3-tiny :
Ejemplo
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Información sobre herramientas grande
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>