带有白色箭头的白色工具提示在白色背景上可见

Question

我正在尝试显示带有白色箭头的白色工具提示。类似于此：

它适用于其他颜色，请参阅提供的代码，但不适用于白色。我知道白色在白色背景上根本看不到，但让它脱颖而出的最佳方法是什么？

$(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

该代码段的问题是在内联 css 之后应用了外部 css，因此您必须使用 !important 覆盖它。

这里有一个接近你截图的样式：

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

.tooltip-inner::before {
  background-color: #fff;
  box-shadow: -2px -2px 2px 0 rgba( 178, 178, 178, .4);
  content: "[=11=]a0";
  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>

带有白色箭头的白色工具提示在白色背景上可见

White tooltip with white arrow visible on white backgound

html

javascript

css

jquery

tooltip