.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

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


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........

El móvil más pequeño del mundo
Las funciones de la sangre
El virus Zika
El colesterol
La base de cotización
Pasa el cursor aquíEste es el mensaje que se mostrará al pasar el cursor.
Enlace
Datos de https://www.soratemplates.com/
Hover over me Tooltip text
ddddd






ver código
vvvvvvvvvvvvvvvvvv 

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos