#tooltip {
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.6);
  max-width: 300px;
  display: none;
  position: absolute;
  z-index: 100;
}

#tooltip.black {
  background: rgba(0,0,0,0.95);
  color: #fff;
}

#tooltip.white {
  background: rgba(255,255,255,0.95);
  color: #222;
}

#tooltip.grey {
    background: rgba(0,0,0,0.65);
    color: #fff;
}

#tooltip .arrow {
  position: absolute;
}

#tooltip.top .arrow,
#tooltip.bottom .arrow{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    right: calc(50% - 5px);
    left: calc(50% - 5px);
}

#tooltip.left .arrow,
#tooltip.right .arrow {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    top: calc(50% - 5px);
    bottom: calc(50% - 5px);
}

#tooltip.top .arrow {
    border-top: 5px solid;
    bottom: -5px;
}

#tooltip.right .arrow {
    border-right: 5px solid;
    left: -5px;
}

#tooltip.bottom .arrow {
    border-bottom: 5px solid;
    top: -5px;
}

#tooltip.left .arrow {
    border-left: 5px solid;
    right: -5px;
}

#tooltip.black.top .arrow {
    border-top-color: rgba(0,0,0,0.95);
}

#tooltip.black.right .arrow {
    border-right-color: rgba(0,0,0,0.95);
}

#tooltip.black.bottom .arrow {
    border-bottom-color: rgba(0,0,0,0.95);
}

#tooltip.black.left .arrow {
    border-left-color: rgba(0,0,0,0.95);
}

#tooltip.grey.top .arrow {
    border-top-color: rgba(0,0,0,0.65);
}

#tooltip.grey.right .arrow {
    border-right-color: rgba(0,0,0,0.65);
}

#tooltip.grey.bottom .arrow {
    border-bottom-color: rgba(0,0,0,0.65);
}

#tooltip.grey.left .arrow {
    border-left-color: rgba(0,0,0,0.65);
}

#tooltip.white.top .arrow {
    border-top-color: rgba(255,255,255,0.95);
}

#tooltip.white.right .arrow {
    border-right-color: rgba(255,255,255,0.95);
}

#tooltip.white.bottom .arrow {
    border-bottom-color: rgba(255,255,255,0.95);
}

#tooltip.white.left .arrow {
    border-left-color: rgba(255,255,255,0.95);
}