Pure CSS Tooltips

tooltip.less

[tooltip],
[tooltip-top],
[tooltip-right],
[tooltip-left],
[tooltip-bottom] {
  @bgcolor: #495364;
  position: relative;
  cursor: pointer;
  &:before,
  &:after {
    opacity: 0;
    pointer-events: none;
    transition: all 1s;
    z-index: 2000;
  }
  &:hover {
    &:before,
    &:after {
      opacity: 1;
    }
  }

  &:after {
    content: attr(tooltip);
    position: absolute;
    width: 100%;
    min-width: 100px;
    padding: 7px 10px;
    margin-left: 5px;

    font-size: 14px;
    text-align: center;
    color: #fff;
    line-height: 14px;
    background-color: @bgcolor;
    border-radius: 2px;
  }
  &:before {
    content: ' ';
    position: absolute;
    width: 5px;
    height: 5px;
    left: 100%;
    top: calc(50%-5px);
    margin-top: -2.5px;

    transform: rotate(45deg);
    border: 5px solid transparent;
    border-bottom-color: @bgcolor;
    border-left-color: @bgcolor;
  }
}

[tooltip-top] {
  &:after {
    content: attr(tooltip-top);
    transform: translate3d(-100%, -100%, 0);
  }
  &:before {
    left: 50%;
    top: -4px;
    transform: rotate(-45deg);
  }
}

[tooltip-left] {
  &:after {
    content: attr(tooltip-left);
    right: 100%;
    margin-right: 5px;
  }
  &:before {
    right: 100%;
    left: auto;
    transform: rotate(-135deg);
  }
}
[tooltip-right] {
  &:after {
    content: attr(tooltip-right);
  }
}

[tooltip-bottom] {
  &:after {
    content: attr(tooltip-bottom);
    transform: translate3d(-100%, 100%, 0);
  }
  &:before {
    left: 50%;
    top: auto;
    bottom: -8px;
    transform: rotate(-225deg);
  }
}