hint.css Tooltip

by ChameeraD

HTML

<link rel="stylesheet" href="//rawgit.com/chinchang/hint.css/master/hint.min.css">
<div class="tip">
    <span class=" hint--top hint--error" data-hint="Hint Top - Error">
        Hint Top - Error
    </span>
</div>
<div class="tip">
    <span class=" hint--right hint--info" data-hint="Hint Right - Info">
        Hint Right - Info
    </span>
</div>
<div class="tip">
    <span class=" hint--left hint--warning" data-hint="Hint Left - Warning">
        Hint Left - Warning
    </span>
</div>
<div class="tip">
    <span class=" hint--bottom hint--success" data-hint="Hint Bottom - Success">
        Hint Bottom - Success
    </span>
</div>

CSS

.tip{
    margin: 50px 200px;
}
.hint::before, [data-hint]::before {
    border: 8px solid transparent;
 }
.hint--top:before {
    border-top-color: #383838;
    margin-bottom: -14px;
    margin-left: -6px;
}
.hint--bottom:before {
    border-bottom-color: #383838;
    margin-top: -14px;
    margin-right: -6px;
}
.hint--left:before {
    border-left-color: #383838;
    margin-bottom: -8px;
    margin-right: -14px;
}
.hint--right:before {
    margin-bottom: -8px;
    margin-left: -14px;
    border-right-color: #383838;
}