时间戳

首页 > 解决方案 > 在白色背景上可见带有白色箭头的白色工具提示

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

问题描述

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

工具提示示例

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

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

标签： javascripthtmljquerycsstooltip

解决方案

该片段的问题在于，外部 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: "\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>

推荐阅读