.tooltip-inner {
    border-radius: 2px;
    padding: 5px 10px 7px;
    font-size: 13px;
}

@mixin tooltip-color($bg) {
    .tooltip-inner {
        background-color: $bg;
    }

    &.top .tooltip-arrow {
        border-top-color: $bg;
    }
    &.top-left .tooltip-arrow {
        border-top-color: $bg;
    }
    &.top-right .tooltip-arrow {
        border-top-color: $bg;
    }
    &.right .tooltip-arrow {
        border-right-color: $bg;
    }
    &.left .tooltip-arrow {
        border-left-color: $bg;
    }
    &.bottom .tooltip-arrow {
        border-bottom-color: $bg;
    }
    &.bottom-left .tooltip-arrow {
        border-bottom-color: $bg;
    }
    &.bottom-right .tooltip-arrow {
        border-bottom-color: $bg;
    }
}

.tooltip-red { @include tooltip-color($m-red); }
.tooltip-purple { @include tooltip-color($m-purple); }
.tooltip-blue { @include tooltip-color($m-blue); }
.tooltip-cyan { @include tooltip-color($m-cyan); }
.tooltip-teal { @include tooltip-color($m-teal); }
.tooltip-green { @include tooltip-color($m-green); }
.tooltip-orange { @include tooltip-color($m-orange); }
.tooltip-brown { @include tooltip-color($m-brown); }
.tooltip-bluegray { @include tooltip-color($m-bluegray); }
.tooltip-black { @include tooltip-color($m-black); }