Cacher is the code snippet organizer for pro developers

<span class="tool-tip" data-tip="Tooltips are the coolest thing since sliced bread" tabindex="1">Tool</span>
<span class="tool-tip" data-tip="Seriosly, How awrsome are these tooltips" tabindex="2">data-tip</span>

/*tool tips*/
.tool-tip {
    cursor: help;
    position:relative;
}
.tool-tip::before,
.tool-tip::after {
    position:absolute;
    left:50%;
    opacity:0;
    z-index: -100;
}

.tool-tip:hover::before,
.tool-tip:focus::before,
.tool-tip:hover::after,
.tool-tip:focus::after {
    opacity:1;
    z-index:100;
    transform: scale(1) translateY(0);
}

.tool-tip::before {
    border-style:solid;
    border-width: 1em .75em 0 .75em;
    border-color: #3E474F transparent transparent transparent;
    bottom: 100%;
    margin-left: -.5em;
    content: "";
    transform: scale(.6) translateY(-90%);
    transition :all .65s cubic-bezier(.85, -0.18, .31, 1.26), opacity .65s .5s;
}

.tool-tip:hover::before,
.tool-tip:focus::before {
    transition-delay: .2s;
}

.tool-tip::after {
    background: #3E474F;
    border-radius: .25em;
    bottom: 180%;
    color:#EDEFF0;
    width: 17.5em;
    padding: 1em;
    margin-left: -8.75em;
    content: attr(data-tip);
    transform: scale(.6) translateY(50%);
    transition: all .65s cubic-bezier(.84, -.18,.31,1.26) .2s;
}

.tool-tip:hover::after,
.tool-tip:focus::after {
    transition-delay:0s;
}