css - 更改工具提示 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？

标签： cssbootstrap-4tooltip

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;
}