Full css tooltip w/o images

HTML

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

SCSS

body { margin:150px } 

.tooltip {
    $bgColor:#222;
    $arrowSize:6px;
    
    display:inline-block;
    background-color:$bgColor;
    border-radius:4px;
    padding:5px 10px;
    position:relative;
    
    p { font:12px Arial; color:white; }

    .arrow { 
        position:absolute; 
        width:0; height:0; 
        border:$arrowSize solid transparent;        
    }
    .top, .bottom { left:50%; margin-left:-$arrowSize; }
    .top { bottom:100%; border-bottom-color:$bgColor; }
    .bottom { top:100%; border-top-color:$bgColor; }

    .left, .right { top:50%; margin-top:-$arrowSize; }
    .left { left:100%; border-left-color:$bgColor;  }
    .right { right:100%; border-right-color:$bgColor; }
}