Full css tooltip w/o images

by jkneb

HTML

<a href="#" class="tooltip bottom" data-title="tooltip text">hover me</a>

    <div class="tooltip bottom">
        <p>texte de la tooltip</p>
        <span class="arrow" aria-hidden="true"></span>
    </div>

SCSS

body { margin:150px } 

.tooltip {
    $bgColor:#222;
    $arrowSize:6px;
    
    position:relative;
    
    /* :before is the tooltip itself */
    &:before { content:''; 
        display:inline-block;
        background-color:$bgColor;
        border-radius:3px;
        padding:5px 10px;
        position:absolute;
        font:12px Arial; color:white; 
        display:none; 
    }

    /* :after is used to draw the arrow */
    &:after { 
        position:absolute; 
        width:0; height:0; 
        border:$arrowSize solid transparent; 
    }
    /* top bottom positioning */
    &.top:after, 
    &.bottom:after { left:50%; margin-left:-$arrowSize; }
    &.top:after { bottom:100%; border-bottom-color:$bgColor; }
    &.bottom:after { top:100%; border-top-color:$bgColor; }
    /* left right positioning */
    &.left:after, 
    &.right:after { top:50%; margin-top:-$arrowSize; }
    &.left:after { left:100%; border-left-color:$bgColor;  }
    &.right:after { right:100%; border-right-color:$bgColor; }
}