Tooltips

Es un efecto para que al poner el ratón sobre un texto, aparece un "bocadillo" sobre este otro texto.
Explicado en esta página.

Ejemplo


Mueve el ratón sobre el texto resaltado de abajo:

Este es sólo un ejemplo,
pon en ratón sobre este texto Texto del Tooltip
, me parece que está muy bien logrado, y es logra sólo CSS.

Y
aquí otro Tooltip
tienes otro tooltip.



Utilización en otros proyectos

Se incluye el fichero .css:

<link href="../RECURSOS_1/Tooltips.css" rel="Stylesheet">
            
En las partes del fichero HTML donde queramos meter un tooltip deberemos poner dos elementos: el texto a resaltar en un <div class="tooltip">, que es de tipo in-line, y dentro de este div pondremos un <span class="tooltiptext"> que contenga el texto a visualizar cuando el ratón se ponga encima. El ejemplo anterior se ha hecho:

<p>Mueve el ratón sobre el texto resaltado de abajo:</p>
Este es sólo un ejemplo,
<div class="tooltip">
    pon en ratón sobre este texto
    <span class="tooltiptext">Texto del Tooltip</span>
</div>
, me parece que está muy bien logrado, y es logra sólo CSS. <br><br>
Y
<div class="tooltip">
    aquí
    <span class="tooltiptext">otro Tooltip</span>
</div>
tienes otro tooltip.
            
No es nesario escribir código javascript.