.tooltip {
    &.top    { padding: 6px 0; }
    &.right  { padding: 0 6px; }
    &.bottom { padding: 6px 0; }
    &.left   { padding: 0 6px; }
}

.tooltip-inner {
    border: 1px solid #ffa320;
}

.tooltip-arrow:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    z-index: -1;
}

.tooltip {
    &.top .tooltip-arrow {
        bottom: 2 * 1px;
        &:after {
            bottom: -2 * 1px;
            left: 50%;
            margin-left: -6px;
            border-width: 6px 6px 0;
            border-top-color: #ffa320;
        }
    }
    &.bottom .tooltip-arrow {
        top: 2 * 1px;
        &:after {
            top: -2 * 1px;
            left: 50%;
            margin-left: -6px;
            border-width: 0 6px 6px;
            border-bottom-color: #ffa320;
        }
    }
    &.left .tooltip-arrow {
        right: 2 * 1px;
        &:after {
            right: -2 * 1px;
            top: 50%;
            margin-top: -6px;
            border-width: 6px 0 6px 6px;
            border-left-color: #ffa320;
        }
    }
    &.right .tooltip-arrow {
        left: 2 * 1px;
        &:after {
            left: -2 * 1px;
            top: 50%;
            margin-top: -6px;
            border-width: 6px 6px 6px 0;
            border-right-color: #ffa320;
        }
    }
}