.tooltip {

$border-color: #e8e8e8;
max-width: 400px;
border-radius: 4px;
display: none;
z-index: 1;
position: absolute;
padding: 10px 13px;
line-height: 1.9;
color: #3c4257;
background-color: #fff;
box-shadow: 4px 4px 15px 1px rgba(68,  68, 72, .12);
border: 0;
box-shadow: 0 1px 2px 0 #ccc;

&:after {
  content: ' ';
  display: block;
  border: 0;
  border-top-left-radius: 1px;
  @include size(8px);
  background-color: #fff;
  position: absolute;
  transform: rotate(45deg);
}
&.top:after {
  bottom: -4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-right: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
}
&.bottom:after {
  top: -4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px solid $border-color;
  border-top: 1px solid $border-color;
}
&.left:after {
  right: -4px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  border-right: 1px solid $border-color;
  border-top: 1px solid $border-color;
}
&.right:after {
  left: -4px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  border-left: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
}

}