tooltip with arrow (extra element)

by JakobJingleheimer

HTML

<div class="tooltip"><span class="arrow"></span>Hello World</div>

SCSS

* {
  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }
}

body {
  background: white;
}

.tooltip {
  padding: 0.2em;
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.tooltip,
.arrow:after {
  background-color: #eee;
  border: 3px solid #111;
}

.below {
  .arrow {
    bottom: initial;
    top: 0;
    transform: translate(-50%, -100%);
    
    &:after {
      bottom: calc(-50% - 3px); // 50% - border width
      transform: rotate(45deg) translateY(-50%);
      top: initial;
    }
  }
}


.arrow {
  bottom: 0;
  height: 1em;
  left: 50%;
  overflow: hidden;
  position: absolute;
  transform: translate(-50%, 100%);
  width: 1em;
    
  &:after {
    content: '';
    display: block;
    height: 75%;
    position: absolute;
    top: calc(-50% - 3px); // 50% - border width
    transform: rotate(45deg) translateX(50%);
    width: 75%;
  }
}