uchas instituciones educativas, particularmente del nivel medio y superior, han optado por la digitalización curricular. Muchos contenidos son ahora consultados en páginas web, facilitado además por recusos tan valiosos como los videos, los pdf, los tutoriales, entre otros; sin olvidar el "impulso" que recibió por los efectos de la pandemia del COVID que ha generado estragos desde 2021.
Digitalización de la educación
Al momento de redactar publicaciones, son muy valiosos los recursos de que nos podamos valer para capturar la atención del usuario, y en el caso de publicaciones dirigidas al nivel de estudiantes, cobra más valor. Los «tooltip» son aliados en esta finalidad, arrojando "luces" sobre aspectos a resaltar.
Aunque no todos los docentes conocen sobre «HTML» y «CSS» , en este post se expone detallada y sencillamente, cómo crear «tooltips» . Obviamente, un nivel básico de «HTML» y «CSS» serían recomendables para entender mejor la metodología para crear «tooltips» y sacarle el máximo provecho. No obstante, queda al interés personal de cada cual, actualizarse en tales contenidos, por demás, importantísimos en la actual educación digitalizada.
Considero importante la puntualización histórica para las generaciones futuras, que tras la pandemia del Covid se impuso en el planeta el confinamiento social para prevenir contagios, el entonces conocido "QUÉDATE EN CASA" (acá en Venezuela se usó como etiqueta de propaganda) lo que aceleró el proceso de digitalizar la educación y se amplió el campo del teletrabajo;. como consecuencia también se originó la importancia del conocimiento de informática y por ende, se masificó el egreso de profesionales y técnicos en dicho ramo.
El concepto
Los «tooltip» son elementos emergentes cuando el cursor se posiciona sobre el elemento que lo dispara.
La etiqueta «title»
Vale decir que. de forma nativa «HTML» cuenta con la etiqueta «title» que permite mostrar estos elementos sin necesidad de «CSS» , si colocas en tu documento «HTML» lo siguiente:
<span title="Soy un tooltip">Elemento</span>
Ahora cuando el cursor pase sobre ese elemento aparecerá un «tooltip» así como lo ilustra la imagen que sigue:
¿Cómo crear un «tooltip» ?
Esta no es la única forma de obtener un «tooltip» , también podemos generar los nuestros con un poco de «HTML» y «CSS» .
Vamos a generar el «HTML» para nuestro «tooltip» .
<div class="tooltip-one">Esto es un Tooltip</div>
Ahora le daremos estilo:
.tooltip-one {
padding: 18px 32px;
background: #fff;
position: relative;
min-width: 150px;
max-width: 180px;
border-radius: 5px;
text-align: center;
filter: drop-shadow(0 3px 5px #ccc);
line-height: 1.5;
}
Obtendremos algo así:
Ahora vamos a agregarle una pequeña flecha para emular el estilo de los «tooltips» de «bootstrap» . Lo haremos utilizando un pseudo elemento, esto quiere decir que no necesitamos agregar nada más de «HTML» .
content: ""; position: absolute; bottom: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; background: white; transform: rotate(45deg); }
Y entonces obtendremos algo así:
Ahora nos falta colocar la funcionalidad que hará que aparezca cuando nos coloquemos sobre el elemento que lo dispara.
Para esto vamos a crear un contenedor padre donde insertaremos nuestro ya creado «tooltip» .
<div class="tooltip-container">
<span class="tooltip-trigger">Disparador</span>
<div class="tooltip-one">
Esto es un tooltip
</div>
</div>
Este contenedor además del «tooltip» deberá contener al elemento que activará el «tooltip» , este elemento es el único estará visible. Para lograrlo debemos agregar esto:
//contenedor
.tooltip-container {
position: relative;
cursor: pointer;
}
//ocultar el tooltip
.tooltip-container .tooltip-one {
display: none;
}
Nos faltaría únicamente declarar que cuando el cursor se encuentre sobre el disparador el «tooltip» debe de verse, esto lo vamos a lograr utilizando el sigo + entre el selector del disparador y el selector del «tooltip» ; quedando así .tooltip-trigger:hover + .tooltip-one con esto controlamos todo lo que está inmediatamente después de .tooltip-one al hacerle hover y en este caso haremos que se vea el «tooltip» .
.tooltip-trigger:hover + .tooltip-one {
display: block;
}
Deberíamos de tener algo así:
See the Pen Tooltip 3 - CSS / HTML - Hover by CSS Tianguis (@css-tianguis) on CodePen.
Además hemos agregado la librería de Font-Awesome para tener el icono de pregunta, esta es una de las formas más comunes de implementar los «tooltips» .
GENERADORES ON LINE
¿Ya entendiste la teoría? Pues te comparto una excelente noticia: ¡no tienes que quebrate la cabeza! Porque a continuación suministro "algunos" de los generadores en línea que harán más fácil tu trabajo:
https://viashchuk.github.io/tooltip-generator/
https://digitalzoomstudio.net/css3tooltipgenerator/
https://www.bypeople.com/tooltip-arrows-generator/
https://milyunacosasutiles.blogspot.com/2017/02/generadores-de-botones-online.html
https://doodlenerd.com/css-element/tooltip-generator
https://www.cssportal.com/css-tooltip-generator/
https://milyunacosasutiles.blogspot.com/2017/11/hacer-tooltip-con-una-imagen.html
Conclusión
Ventajas |
Inconvenientes |
|
|
No hay comentarios.:
Publicar un comentario