时间戳

首页 > 解决方案 > 如何将自定义类添加到 ng-bootstrap 工具提示

angular - 如何将自定义类添加到 ng-bootstrap 工具提示

问题描述

我正在尝试将自定义类添加到 ng-bootstrap 工具提示，但它不会应用它。

HTML

<i class="fa fa-info-circle" aria-hidden="true" [ngbTooltip]="infoTooltipTemplate" [tooltipClass]="info-tooltip" placement="top"></i>

CSS

.info-tooltip .tooltip-inner {
  max-width: 340px;
  text-align: left;
  background-color: #fff;
  color: #000;
  border-radius: 30px;
  box-shadow: 0 0 3px #00000040;
}

工具提示的样式仍然与默认样式相同。我正在使用 @ng-bootstrap 版本 4.2.2 开发 Angular 7

标签： angulartooltipng-bootstrap

解决方案

这是来自 ng-bootstrap 网站的自定义类的示例。链接到 stackblitz：链接

HTML

<button type="button" class="btn btn-outline-secondary" ngbTooltip="Nice class!"
tooltipClass="my-custom-class">
Tooltip with custom class
</button>

CSS

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}

我希望这有帮助。

更新

正如 Devin 在评论中提到的，您必须在全局样式表中添加自定义样式。谢谢德文。

推荐阅读