@mixin type($background-color) {
  background-color: $background-color;
  &.place-top {
    &:after {
      border-top: 8px solid $background-color;
    }
  }
  &.place-bottom {
    &:after {
      border-bottom: 8px solid $background-color;
    }
  }
  &.place-left {
    &:after {
      border-left: 6px solid $background-color;
    }
  }
  &.place-right {
    &:after {
      border-right: 6px solid $background-color;
    }
  }
}

.reactTooltip {
  border-radius: 3px;
  display: inline-block;
  font-size: 13px;
  left: -999em;
  opacity: 0;
  padding: 8px 21px;
  position: fixed;
  pointer-events: none;
  transition: opacity 0.3s ease-out , margin-top 0.3s ease-out, margin-left 0.3s ease-out;
  top: -999em;
  // Modify z-index if you have some specific requirement for the layout
  z-index: 999;
  &:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
  }
  &.show {
    opacity: 0.9 !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
  }
  //Type
  &.type-dark {
    color: #fff;
    @include type(#222);
  }
  &.type-success {
    color: #fff;
    @include type(#8DC572);
  }
  &.type-warning {
    color: #fff;
    @include type(#F0AD4E);
  }
  &.type-error {
    color: #fff;
    @include type(#BE6464);
  }
  &.type-info {
    color: #fff;
    @include type(#337AB7);
  }
  &.type-light {
    color: #222;
    @include type(#fff);
  }
  // Place
  &.place-top {
    margin-top: -10px;
    &:after {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      bottom: -8px;
      left: 50%;
      margin-left: -10px;
    }
  }
  &.place-bottom {
    margin-top: 10px;
    &:after {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      top: -8px;
      left: 50%;
      margin-left: -10px;
    }
  }
  &.place-left {
    margin-left: -10px;
    &:after {
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      right: -6px;
      top: 50%;
      margin-top: -5px;
    }
  }
  &.place-right {
    margin-left: 10px;
    &:after {
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      left: -6px;
      top: 50%;
      margin-top: -5px;
    }
  }
}