CSS ToolTip

by Alex

HTML

<span class="i">Text</span>

CSS

.i {
    background: #000;
    color: #fff;
    display: inline-block;
    padding: 10px;
    position: relative;
}
.i:hover {
    background: #088;
}
.i:after {
    content: '';
    border-top: 5px solid #000;
    border-left: 5px inset transparent;
    border-right: 5px inset transparent;
    display: block;
    margin-left: -5px;
    position: absolute;
    bottom: -5px;
    left: 50%;
}
.i:hover:after {
    border-top: 5px solid #088;
}