Question

我正努力让我的网站代码加快某些css更改，特别是工具提示。做一些约束，决定覆盖引导CSS，而不是创建一个新的。在这个过程中，我看到了一些奇怪的行为，其中工具提示的内容在1处是不透明的，但填充不是。这会导致填充部分显示文本通过，我希望整个事物不透明...

这是在IE（Edge）和Chrome浏览器中出现的。

我在jsfiddle中为可见性和代码重新创建了这个。 https://jsfiddle.net/s923y9a4/1/

继承了一些相关的CSS（其余的是小提琴）：

 /* START Overwrite bootstrap tooltips */

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  padding: 12px;
  filter: alpha(opacity=0);
  opacity: 0;
  color: #4b4b4b;
  line-break: auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.tooltip.in {
  filter: alpha(opacity=100);
  opacity: 1;
}

.tooltip.right {
  padding: 12px;
  margin-left: 3px;
}

.tooltip-inner {
  max-width: 200px;
  color: #000;
  text-align: center;
  background-color: #fff;
  border-radius: 0px;
  padding: 0px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -15px;
  /*border-width: 15px 15px 15px 0;*/
  border-right-color: #fff;
}
/* END Bootstrap Tooltip overwrite */

我已经尝试了所有我能想到的东西，所以如果你有任何想法，我会非常感谢你的帮助！

P.S。在工具提示箭头上还有一些工作要做，但我没有花费那么多时间。如果你碰巧快速解决了这个问题，我肯定不会把它拒之门外。

Answer 1

您需要为基础.tooltip添加背景颜色。由于您没有指定背景颜色，因此填充没有颜色，因此是不透明的。

.tooltip {
    background-color: #fff;
    ...
}

覆盖Bootstrap Tooltip CSS导致填充是透明的，但不是内容

1 个答案: