White tooltip with white arrow visible on white backgound

Question

I am trying to display a white tooltip with a white arrow. Something similar to this:

It works fine for other colors please see the code provided, but not for the white color. I understand that the white color is simply not visible on the white background but what is the best way to make it stand out?

$(function () {
  $('#tooltip').tooltip('show');
});

#tooltip, {
  position: relative;
  color: #fff;
}
.tooltip-inner {
  background: #fff;
}
.tooltip.bottom .tooltip-arrow { 
  border-bottom-color: #fff;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<label for="epcfLevel3Name" class="col-md-5 required">button<span id="tooltip" data-placement="bottom" title="Tooltip" class="glyphicon glyphicon-info-sign pull-right"></span></label>

Answer 1

The problem with the snippet is that the external css is being applied after the inline css, so you must use !important to override it.

Here is a style close to your screenshot:

$(function() {
  $('#tooltip').tooltip('show');
});

.tooltip-inner::before {
  background-color: #fff;
  box-shadow: -2px -2px 2px 0 rgba( 178, 178, 178, .4);
  content: "\00a0";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  transform: rotate( 45deg);
  -moz-transform: rotate( 45deg);
  -ms-transform: rotate( 45deg);
  -o-transform: rotate( 45deg);
  -webkit-transform: rotate( 45deg);
  margin-top: 2px;
}

.tooltip-inner {
  background-color: #fff !important;
  color: #000 !important;
  box-shadow: 0px 0px 6px #B2B2B2;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<label for="epcfLevel3Name" class="col-md-5 required">button<span id="tooltip" data-placement="bottom" title="Tooltip" class="glyphicon glyphicon-info-sign pull-right"></span></label>