Как добавить пользовательский класс в подсказку ng-bootstrap - PullRequest
Новая
       25

Как добавить пользовательский класс в подсказку ng-bootstrap

0 голосов
/ 05 ноября 2019

Я пытаюсь добавить пользовательский класс во всплывающую подсказку 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;
}

Стиль для всплывающей подсказки остается таким же, как стиль по умолчанию. Я работаю над Angular 7 с @ ng-bootstrap версии 4.2.2

Ответы [ 2 ]

0 голосов
/ 05 ноября 2019

Вот пример пользовательского класса с сайта 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;
}

Надеюсь, это поможет.

0 голосов
/ 05 ноября 2019

Вы можете использовать это в своем css: 

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

Это также означает, что вы можете удалить это: [tooltipClass]="info-tooltip"

Так что это будет просто: 

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