更改工具提示 CSS bootstrap 4 的样式

Question

我想将工具提示的样式：背景颜色更改为白色（见图片），为此我使用了 css 这段代码：

html 代码：

<th rowspan="2" style="text-align: center">Test <sup><img src="assets/icons/help.png" data-toggle="tooltip" title="test test" data-flow="bottom"></sup></th>

CSS 代码：

[data-tooltip] {
  position: relative;
  cursor: pointer;
  background-color: #FFFFFF;
  color: #16181b;
  width:100%;
}
[data-tooltip]:before,
[data-tooltip]:after {
  line-height: 1;
  font-size: .9em;
  pointer-events: none;
  position: absolute;
  box-sizing: border-box;
}

但它不适用，请帮忙

我所拥有的：

我想要的：

现在我可以改变背景颜色了：

::ng-deep .tooltip-inner {
  width: 700px;
  height: 500px;
  text-align: left;
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 3px #00000040;
}

但是工具提示在像这样的单元格边框下： 我怎样才能显示 dehor？？

Answer 1

解决办法： 使用 depp 选择器进行 angular

::ng-deep .tooltip-inner {
  line-height: 20px;
  text-align: left;
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 7px #00000040;
  padding: 15px;
}

::ng-deep.tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #FFFFFF;
  border-width: 0 5px 5px;
}