Bootstrap Tooltip arrow color

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-8 col-xs-offset-2">


    <button type="button" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

    <button type="button" class="btn btn-default  btn-xs" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

    <button type="button" class="btn btn-default  btn-xs" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

    <button type="button" class="btn btn-default  btn-xs" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
  </div>
</div>

CSS

.row {
  margin-top: 40px;
}

.tooltip-inner {
  background-color: #fff;
  border:1px solid red;
  color:black;
}

[data-placement="top"] + .tooltip > .tooltip-arrow {
  border-top-color: white;
}

[data-placement="right"] + .tooltip > .tooltip-arrow {
  border-right-color: white;
}

[data-placement="bottom"] + .tooltip > .tooltip-arrow {
  border-bottom-color: white;
}

[data-placement="left"] + .tooltip > .tooltip-arrow {
  border-left-color: white;
}

JavaScript

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
});