Add border to bootstrap tooltip

bootstrap-tooltip-border.scss

$tooltip-border-color: #ccc;
$tooltip-border-width: 1px;
$tooltip-arrow-border-width: $tooltip-arrow-width + $tooltip-border-width;

.tooltip {
    &.top    { padding: $tooltip-arrow-border-width 0; }
    &.right  { padding: 0 $tooltip-arrow-border-width; }
    &.bottom { padding: $tooltip-arrow-border-width 0; }
    &.left   { padding: 0 $tooltip-arrow-border-width; }
}

.tooltip-inner {
    border: $tooltip-border-width solid $tooltip-border-color;
}

.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 * $tooltip-border-width;
        &:after {
            bottom: -2 * $tooltip-border-width;
            left: 50%;
            margin-left: -$tooltip-arrow-border-width;
            border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
            border-top-color: $tooltip-border-color;
        }
    }
    &.bottom .tooltip-arrow {
        top: 2 * $tooltip-border-width;
        &:after {
            top: -2 * $tooltip-border-width;
            left: 50%;
            margin-left: -$tooltip-arrow-border-width;
            border-width: 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
            border-bottom-color: $tooltip-border-color;
        }
    }
    &.left .tooltip-arrow {
        right: 2 * $tooltip-border-width;
        &:after {
            right: -2 * $tooltip-border-width;
            top: 50%;
            margin-top: -$tooltip-arrow-border-width;
            border-width: $tooltip-arrow-border-width 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
            border-left-color: $tooltip-border-color;
        }
    }
    &.right .tooltip-arrow {
        left: 2 * $tooltip-border-width;
        &:after {
            left: -2 * $tooltip-border-width;
            top: 50%;
            margin-top: -$tooltip-arrow-border-width;
            border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
            border-right-color: $tooltip-border-color;
        }
    }
}

I had to add this above line 3 to get it to work:
$tooltip-arrow-width: 5px;

otherwise works perfectly.

Check my fork if you want to customise background and text color as well: https://gist.github.com/dsnoeck/9ce65ec8d025796c3be53e7c06880eab