.tooltip2 {
    display: inline;
    position: relative;
    line-height: 18px;
  }
  .tooltip2:hover:after {
    bottom: 26px;
    content: attr(alt); /* este es el texto que será mostrado */
    left: 20%;
    position: absolute;
    z-index: 98;
    /* el formato gráfico */
    background: orange; /* el color de fondo */
     
    color: #fff; /* el color del texto */
    font-family: arial;
    font-size: 11px;
    padding: 5px 15px;
    text-align: left;    
    line-height: 18px;
    width: 200px;

  }
  .tooltip2:hover:before {
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    /* el triángulo inferior */   
    
    line-height: 18px;
  }