-->

El Tooltip es el cuadradito que aparece cuando ponemos el cursor encima de un enlace.
Pasa el c.


Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso


Nos vamos a Tema > HTML 
Busca la etiqueta  ]]></b:skin> y aƱade este bloque encima:

CĆ³digo


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 320px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>



Texto a mostrar con el contenido oculto.....

Texto a mostrar expandiendo todo el contenido oculto........

Pasa el cursor aquĆ­Este es el mensaje que se mostrarĆ” al pasar el cursor.

Publicar un comentario

0 Comentarios