Crear un div que aparezca al pasar el raton por encima en html y css

 Hoy vamos a ver como crear un llamado toolstip, un toolstip es un div que aparece encima de otro elemento mostrando una breve descripción de él o cualquier otro dato de interés cuando se pasa el ratón por encima. Se puede hacer de muchas maneras pero hoy lo vamos hacer en html y css.

Ejemplo:

Es más sencillo de lo que parece, aquí viene el código css:

.tooltip {
    display: inline;
    position: relative;
    opacity: .95;
   -moz-opacity: .95;
   filter:alpha(opacity=95);

  }
  .tooltip:hover:after {
    /*top: 20px; cuadrado debajo*/
    bottom:26px;/* cuadrado Encima*/   
    content: attr(original-title); /* este es el texto que será mostrado */
    left: 20%;
    position: absolute;
    z-index: 500;
    /* el formato gráfico */
   /*background: rgba(255,255,255, 0.2) ;*/
    background: orange ;
    border-radius: 5px;
    color: #FFF; /* el color del texto */
    font-family: Georgia;
    font-size: 12px;
    padding: 5px 15px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 150px;

  }
  .tooltip:hover:before {
    /*top: 20px; triangulo debajo*/
    bottom:20px;/* triangulo Encima*/
    content: "";
    left: 50%;
    position: absolute;
    z-index: 500;
    /* el triángulo inferior */
    border: solid;
    /*border-color: rgba(255,255,255, 0.2) transparent;*/
    border-color: orange transparent;
    /* border-width: 0 6px 6px 6px; Triangulo sentido arriba*/
    border-width: 6px 6px 0 6px; /* Triangulo sentido abajo*/

  }

Ahora lo único que falta es llamarlo desde el HTML tan sencillo cómo:

 <a href="#" original-title="Desarrollado por empline" class="tooltip">un ejemplo</a>

Podeis modificarlo para adaptarlo como querais, espero que os haya servido.