.hint,[data-hint]{position:relative;display:inline-block}

.hint:before,.hint:after,[data-hint]:before,[data-hint]:after{
position:absolute;
opacity:0;
z-index:1000000;
pointer-events:none;
-webkit-transition:.3s ease;-moz-transition:.3s ease;transition:.3s ease}

.hint:hover:before,.hint:hover:after,[data-hint]:hover:before,[data-hint]:hover:after{opacity:1}

.hint:before,[data-hint]:before{content:'';position:absolute;background::transparent;border:6px solid transparent; z-index:1000001}

.hint:after,[data-hint]:after{content:attr(data-hint);background:#181513;color:#fff;
padding:10px;font-size:14px;line-height:14px; white-space:nowrap;}


.hint--bottom:before{border-bottom-color:#181513}
.hint--right:before{border-right-color:#181513}


.hint--bottom:before{margin-top:-12px}
.hint--bottom:after{margin-left:-18px}
.hint--bottom:before,.hint--bottom:after{top:100%;left:50%}
.hint--bottom:hover:before,.hint--bottom:hover:after{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}

.hint--right:before{margin-left:-11px;margin-bottom:15px}
.hint--right:after{margin-bottom:-2px}
.hint--right:before,.hint--right:after{left:100%;bottom:50%}
.hint--right:hover:before,.hint--right:hover:after{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}
transform:translateX(-8px)}