Tooltip

[W_Beto]

Buenas.

Estoy creando un tooltip y ahora tengo el problema de que no logro darle un margin-bottom o algo que levante el mensaje de acuerdo a su contenedor(intento hacerlo lo más simple posible). Les dejo el código:

Código HTML:

<p>Lorem ipsum
<span class="cont"><span id="alt" alt="Tooltip">soluta eaque accusamus</span></span>
praesentium!</p>
 

Código CSS:

#alt{
    color: blue;
    cursor: pointer;
}
 
#alt:hover:after{
    content: attr(alt);
    background-color: #000;
    color: #fff;
    position: absolute;
    padding: 5px;
    border-radius: 7px 7px 7px 0;
}