CREAR TOOLTIPS EN BLOGGER CON CSS

CREAR TOOLTIPS EN BLOGGER CON CSS

"BLOGS KIRADOBER"

Los tooltips son descripciones emergentes que ayudan a dar un mejor entendimiento sobre el contenido que se lee. Algo muy parecido en HTML es el atributo title que hace lo mismo, muestra una descripción de un enlace, una palabra o una imagen, por ejemplo este texto.

Los tooltips son y hacen lo mismo que el atributo title pero a diferencia de éstos últimos se pueden personalizar la forma, el color de fondo, el texto, etc.
Hay muchas maneras de ponerlos, y por la red abundan muchos scripts que incluso pueden darle algún efecto adicional.
En este primer caso vamos a ver cómo crear tooltips usando sólo CSS sin nada de Javascript para no hacer la página más lenta y pesada.
Puedes ver el resultado pasando el cursor aquí.

El método es muy simple, fácil de hacer y personalizable,
sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> pegas lo siguiente:

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:



 Un clic en “Plantilla”                                                     

  Un clic en “Editar HTML”                             

  Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

                                                                       

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

                                                                               

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

                                                                     

 Busca el siguiente código


]]></b:skin>

 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

a.tooltip { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;

Y ahora siempre que quieras usar un tooltip usa este código dentro de tus entradas:
<a class="tooltip">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>

En el código sólo hay tres cosas a tomar en cuenta, lo que está en negrita siempre se debe poner para que aparezcan los estilos del tooltip; lo que está en azul es el texto al que se le pasará el cursor encima; y lo que está en color rojo es la descripción.

 Data de la Publicación;09-09-2020

 Fuente; ciudadblogger

 Publicado por;