Añadir un Elementor tooltip a tu sitio web puede mejorar la experiencia del usuario al proporcionar información adicional de manera discreta. Elementor, uno de los constructores de páginas más populares para WordPress, permite realizar este tipo de personalización de manera sencilla y eficiente. En este tutorial, te mostraremos cómo agregar un tooltip a un texto en Elementor.
Índice
Paso 1: Añadir un Widget de Texto y Pegar el Código
Primero, deberás agregar un widget de texto a tu página en Elementor. Para hacerlo:
Abre tu página en Elementor.
Arrastra y suelta un widget de Texto desde el panel de widgets al área de contenido.
En el editor de texto del widget, pega el siguiente código HTML:
Texto que se muestra
<div class="tooltip">
<i class="fas fa-info-circle"></i>
<span class="tooltiptext">
Este texto sale cuando paso el ratón por encima del icono de informacion. Es una manera ideal de añadir información adicional a un texto con Elementor.
</span>
</div>
Paso 2: Añadir el Código CSS en la Pestaña de CSS Personalizado
Para que el tooltip funcione correctamente y tenga un diseño atractivo, es necesario añadir algo de CSS. Sigue estos pasos:
En el editor de Elementor, haz clic en la pestaña Avanzado del widget de texto.
Busca la sección de CSS personalizado (disponible en la versión pro de Elementor).
Pega el siguiente código CSS en el campo de CSS personalizado:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px; /* Ancho del tooltip */
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 20px;
font-size: 12px; /* Tamaño del texto del tooltip*/
line-height: 16px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Este código define el estilo del tooltip, incluyendo su posición, color, tamaño, y animación de aparición. Cuando el usuario pase el ratón sobre el icono de información, el tooltip se hará visible.
Resultado: Un icono que amplia información
Con estos sencillos pasos, has aprendido a añadir un tooltip a un texto en Elementor. Esta funcionalidad es útil para proporcionar información adicional sin sobrecargar la interfaz del usuario. Puedes personalizar tanto el texto del tooltip como su estilo para adaptarlo a las necesidades de tu sitio web.
Necesitas que te echemos una mano?
En Dimoteca te podemos ayudarte a crear un sitio web atractivo y personalizado de manera sencilla.
¿Quieres saber qué podemos ofrecerte?
