<div class="arrow-up"></div> <div class="tooltip bs-tooltip-top"> tooltip up </div>
.bs-tooltip-top{ margin-top: 1rem; position: relative; background: #000; color: #fff; padding: .5rem 1rem; display: inline-block; border-radius: .25rem; &::after{ position: absolute; width: 0;height: 0; content: ""; border-bottom: .5rem solid #000; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-top: none; top:-.5rem; left: 50%; transform: translateX(-50%); } }