plantilla entrada

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

Cómo crear vínculos dentro de la misma entrada

22 de junio de 2009 Publicado por El Potro , 163 comentarios,

Tener enlaces a otra parte del texto puede servir mucho cuando se trata de un artículo extendido y deseas vincular elementos entre sí.

Esto se usa cuando por ejemplo en un post pones un índice con los temas a tratar y usas un enlace que te lleve al tema pero dentro de la misma entrada.

Enlazar estos elementos es muy sencillo, por ejemplo, supongamos que el índice es este:

Tema Uno
Tema Dos
Tema Tres

 Lo que haremos primero es crear el link, quedando así:

<a href="#tema1">Tema Uno</a>
<a href="#tema2">Tema Dos</a>
<a href="#tema3">Tema Tres</a>

Y ya sólo agregas el atributo a name a donde va a apuntar el enlace, por ejemplo:

<a name="tema1">Tema Uno</a>

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem...

De este modo le estás indicando al enlace que se dirija a otra parte dentro del mismo documento, esto se logra con el símbolo de gato (#) y con el nombre del link (a name) le especificas a qué parte del documento debe ir.

Puedes ver el ejemplo funcionando en este post de prueba, haz click en uno de los temas del índice y verás que te lleva a otra parte dentro de la misma entrada.

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/