html - Angular 中的 ngbTooltip 不在元素的中心

Question

有谁知道为什么工具提示不在元素的中心(中心顶部)？

这是图片...你可以看到它在顶部中心的右侧多一点

item

其他元素也一样..这里会更容易看

item 2

这是我的 html 代码:

<button class="btn btn-icon coverage-item "
        type="button"
        placement="top"
        ngbTooltip="Incendio">
  <img src="/assets/img/coverages/icon_thunderbolt.svg"/>
</button>

这是scss代码:

@import "~bootstrap/scss/_functions.scss";
@import "../../scss/variables";

.coverage-item {
  background: $white;
  border: 1.5px solid $brand-primary;
  color: $gray-light;
  height: 3.5rem;
  width: 3.5rem;
  position: relative;
  font-size: 1.5rem;
  padding: 0rem 0rem;
}

.coverage-item__new {
  background: $white;
  border: 1.5px dashed $gray-lighter;
  color: $gray-light;
  height: 3.5rem;
  width: 3.5rem;
  position: relative;
  font-size: 1.5rem;
  padding: 0rem 0rem;

Answer 1

我刚刚将此代码添加到我的 scss 文件中，它正在运行。

app-coverage-item {
  .tooltip {
    margin-left: -2px;
  }
}