tooltips with pure CSS

tooltip.html

<a class="tooltip" href="#">Item<b>Item help</b></a>

tooltip.scss

.tooltip {
  position: relative;

  b {
    position: absolute;
    padding: 10px;
    width: 80px;
    color: $color-text;
    top: -400%;
    left: 50%;
    margin: 0 0 0 -35px;
    text-align: center;
    background: $color-background-site;
    border: $border;
    pointer-events: none;
    opacity: 0;
    @include vendor-webkit(transition, all .5s);

    &:before,
    &:after {
      content: '';
      position: absolute;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
    &:after {
      bottom: -10px;
      margin-left: -10px;
      border-top: 10px solid $color-primary;
    }
  }

  &:hover b {
    opacity: 1;
    top: -300%;
    border: $border;
  }
}