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

INDICE

Home Link 1 Link 2 Link 3 Link 4

ggg

Tema Uno 

Tema Dos

Tema Tres

XXXX

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.

Enlace

Datos de https://www.soratemplates.com/

PREVIEW

TEXT HERE

This notepad background represents your website layout. The ribbon fold is designed to appear outside of the layout and will only appear if the window is wide enough.

To make the ribbon fold appear inside the layout, increase the padding.