Vamos a ver cómo crear un elemento de texto emergente, a modo de un tooltip, que aparezca cuando situamos el ratón sobre otro elemento del documento.
El proceso es bastante sencillo y recae todo en el trabajo con CSS, requiriendo de una estructura de HTML muy básica, y sin necesidad de usar nada de JavaScript.
El html necesario para esta funcionalidad es muy básico. Lo podemos resolver con tan solo dos elementos principales, por una parte el elemento que va a actuar de disparador, es decir, el elemento ya visible en pantalla, y por otra el elemento emergente. Este elemento sí puede contener más HTML si nos hiciera falta por razones de contenido.
El tipo de elementos HTML puede ser cualquiera, bloques o elementos en línea, y la elección de uno u otro tipo dependerá del contexto de diseño que estemos realizando. En este ejemplo, como queremos un elemento emergente dentro de un párrafo de texto, vamos a optar por elementos en línea tipo <span>.
Además, la relación de proximidad entre los dos elementos en el código tiene que ser compatible con los selectores CSS disponibles. Es decir, el elemento emergente tiene que estar conntenido dentro, o justo a continuación de, el elemento disparador, para que el evento hover sobre el disparador modifique la presentación del elemento emergente.
Por lo tanto, nos valdría tanto un selector de tipo anidamiento: #disparador > #emergente,
como
el
selector adyacente: #disparador + #emergente.
Pero sí lo que necesitamos es ubicar al elemento emergente en pantalla respecto a su disparador, entonces la mejor opción es la de anidamiento.
De este modo, nuestro código sería algo así:
<p class="texto">En esta línea ponemos el icono que hace de disparador para el elemento emergente... <span
id="disparador">?<span id="emergente">Este texto aparece cuando pones el ratón sobre el
interrogante.</span></span></p>
Aquí es dónde sucede todo. El esquema es este: Inicialmente el elemento emergente está oculto, y cada vez que situamos el ratón sobre su disparador, este aparece junto a él, en la posición que indiquemos respecto al disparador.
Para ocultar a este elemento usamos la propiedad display: none;. Existen varias formas de
ocultar elementos con CSS, pero esta es una de las más sencillas y eficaces.
A partir de aquí se trata de formatear cada elemento como prefiramos. Para el elemento disparador le vamos a dar la forma de un botón circular con un interrogante dentro. Es un elemento de texto, pero con la apariencia visual de una imagen.
El formato para el contenido sería este:
font-weight: bold;
font-size: 2.5rem;
color: darkgrey;
line-height: 3rem;
text-align: center;
cursor: pointer;
Y para darle la apariencia de botón circular, estas propiedades del modelo de caja:
border: 1px dashed;
background-color: white;
border-radius: 50%;
width: 3rem;
height: 3rem;
display: inline-block;
Además, para poder ubicar al elemento emergente respecto a este, definiremos su posición:
position: relative;.
Todo junto quedará así:
#disparador {
font-weight: bold;
font-size: 2.5rem;
color: darkgrey;
line-height: 3rem;
text-align: center;
cursor: pointer;
border: 1px dashed;
background-color: white;
border-radius: 50%;
width: 3rem;
height: 3rem;
display: inline-block;
position: relative;
}
El formato para el elemento emergente queda así.
Para el contenido:
font-size: 0.9rem;
line-height: 1;
font-weight: normal;
text-align: left;
Para la caja:
width: 160px;
background-color: white;
border: 1px solid;
padding: 0.3rem;
Y para ubicarlo respecto del disparador, tenemos que definir su posición como absoluta, y jugar con sus propiedades top, bottom, right, left, según donde queramos ubicarlo. Un ejemplo:
position: absolute;
right: 100%;
bottom: 100%;
Pero si queremos hacer coincidir su lado izquierdo con el lado derecho del disparador, y a la mitad de su
altura cambiaríamos right y bottom por left: 100%; top: 50%;.
Este es el CSS completo del elemento:
#emergente {
font-size: 0.9rem;
line-height: 1;
font-weight: normal;
text-align: left;
width: 160px;
background-color: white;
border: 1px solid;
padding: 0.3rem;
position: absolute;
right: 100%;
bottom: 100%;
display: none;
}
En esta línea ponemos el icono que hace de disparador para el elemento emergente. Ponemos el texto que sea necesario para completar un párrafo y de este modo quede mejor el formato... ?Este texto aparece cuando pones el ratón sobre el interrogante.. De hecho, podemos poner texto después del disparador también.
Con la posición absoluta y las propiedades top,left, botom, right podemos ubicar al elemento emergente. Además, podemos usar el valor calc() para conseguir que el elemento emergente esté alineado en su centro con el centro del disparador.
Para conseguir esto tenemos que llevar el lado izquierdo del elemento emergente al centro del disparador, restándole a ese desplazamiento la mitad de la anchura del elemento emergente. Y con el lado superior haremos lo mismo, lo llevamos al centro y le restamos la mitad de la altura del elemento. Por lo tanto es necesario que sepamos, al menos, las medidas del elemento emergente para poder realizar el cálculo. Si sabemos las medidas de los dos podemos hacer el cálculo nosotros y asignar esos valores directamente a las propiedades top y left.
Lo interesante de usar calc() es que podemos hacer esto sin saber las medidas del disparador. Como
el disparador es el contenedor del emergente, las propiedades width:100%; y height: 100% del
emergente nos devuelven el ancho y alto del disparador.Este CSS sobre el emergente lo centrará en su
disparador:
#emergente {
width: 160px;
height: 60px;
position: absolute;
left: calc(50% - 80px);
top: calc(50% - 30px);
}
Si sabemos la altura y anchura del disparador, y está definido en otras unidades distintas del emergente, también podemos usar calc() para realizar el mismo proceso. En este caso nuestro disparador mide 3rem de ancho y 3rem de alto. Podemos hacer esto y hará lo mismo que la regla anterior:
#emergente {
width: 160px;
height: 60px;
position: absolute;
left: calc(1.5rem - 80px);
top: calc(1.5rem - 30px);
}
En esta línea ponemos el icono que hace de disparador para el elemento emergente. Ponemos el texto que sea necesario para completar un párrafo y de este modo quede mejor el formato... ?. De hecho, podemos poner texto después del disparador también.