Tooltip

<style>
span.tooltip {
    display: none;
    z-index: 1000;
    position: absolute;
    text-decoration: none;
    color: #fff;
    padding: 0 7px 0 9px;
    background: #777;
    border: none;
    text-shadow: 0 1px 0 #000;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
span.tooltip:before {   /* Dreieck */
    content: "";
    position: absolute;
    top: 0px;
    left: -10px;
    float: left;
    width: 0px;
    height: 0px;
    border-width: 11px 10px 11px 0px;
    border-style: solid solid solid solid;
    border-color: transparent #777 transparent transparent;
}

a#hilfe:hover span.tooltip,
a#hilfe:active span.tooltip {
    display: block;
    margin: -4px 45px;
}
</style>

<a id="hilfe" href="#">
    Hilfe
    <span class="tooltip">Hilfetext</span>
</a>