Tooltip

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

Este cuadradito vale para explicarnos algo relacionado con el enlace .

 

CSS

<style>

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

HTML

<div class="tooltip">Hover over me

  <span class="tooltiptext">Tooltip text</span>

</div>

html

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