.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; }
}