/* Tooltip contenedor (selector)*/
.tooltipa {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; Si se quiere poner una linea de puntos debajo del selector*/
}

/* Texto (contenido) del tooltip */
.tooltipa .tooltipatext {
  visibility: hidden;
  width:250px;
  background-color: rgb(222,247,237);
  color: #000;
  box-shadow: 6px 6px 10px #aaa;
  text-align: center;
  font-size: 0.9em;
  border-radius: 6px;
  padding:15px 15px;
  
  
  /* Posiciona el tooltip arriba y a la izquierda*/
  position: absolute;
  z-index: 1;
  bottom: 130%;
  left: 50%;
  margin-left: -200px;
  
  }

/* Muestra el texto del tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del tooltip*/
.tooltipa:hover .tooltipatext {
  visibility: visible;
}

/* Contenedor (selector)* del Tooltip */
.tooltipa2 {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px solid green;  Pone una línea sólida de 1px de color verde en el borde de abajo*/
}

/* Texto (contenido) del tooltip */
.tooltipa2 .tooltipa2text {
  visibility: hidden;
  width:462px;
  background-color: rgb(234,237,255);
  color: #000;
  box-shadow: 6px 6px 10px #aaa;
  text-align: center;
  font-size: 0.9em;
  border-radius: 6px;
  padding:15px 15px;
  
  
  /* Posiciona el tooltip arriba*/
  position: absolute;
  z-index: 1;
  bottom: 105%;
  left: 100%;
  margin-left: -445px; 
  
}

/* Muestra el texto del tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del tooltip*/
.tooltipa2:hover .tooltipa2text {
  visibility: visible;
}

/* Tooltip contenedor (selector)*/
.tooltipd {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; Si se quiere poner una linea de puntos debajo del selector */
}

/* Texto (contenido) del tooltip */
.tooltipd .tooltipdtext {
  visibility: hidden;
  width:250px;
  background-color: rgb(222,247,237);
  color: #000;
  box-shadow: 6px 6px 10px #aaa;
  text-align: center;
  font-size: 0.9em;
  border-radius: 6px;
  padding:15px 15px;
  
 
   
   /* Posición del tooltip debajo y a la derecha  */
  position: absolute;
  z-index: 1;
  top: -5px;
  left:20px;
}

/* Muestra el texto del tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del tooltip*/
.tooltipd:hover .tooltipdtext {
  visibility: visible;
}

/* Tooltip contenedor (selector)*/
.tooltipi {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */
}

/* Texto (contenido) del tooltip */
.tooltipi .tooltipitext {
  visibility: hidden;
  width: 250px;
  background-color: rgb(222,247,237);
  color: #000;
  text-align: center;
  font-size: 0.9em;
  border-radius: 6px;
  padding: 5px 15px;
  
  /* Position the tooltipi debajo y a la izquierda*/
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 20px;
}

/* Muestra el texto del tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del tooltip*/
.tooltipi:hover .tooltipitext {
  visibility: visible;
}

/* Muestra el texto del tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del tooltip*/
.tooltipi:hover .tooltipitext {
  visibility: visible;
}

/* Tooltip para ejemplo  */
/* Tooltip contenedor */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text: Si quieres puntos debajo del texto flotante */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}