Как добавить собственный стиль в ngx-bootstrap / tooltip

Question

Я изменил фон и цвет рамки для всплывающей подсказки.Стрелка во всплывающей подсказке должна быть заполнена белым, а не темным и с рамкой.Это возможно

Я пробовал в StackBlitz

Answer 1

Добавьте это в ваш style.css файл.

.tooltip.bottom .tooltip-arrow {
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-right: none;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: white;
}

Answer 2

Вы можете установить стрелку на белый, поместив

:host ::ng-deep .tooltip-arrow {
  border-bottom-color: white;
}

в ваш app.component.css. Это влияет только на дочерние элементы app.component - я предполагаю, что вы хотите стиль только локально.

Или для того, чтобы они глобально поместили

.tooltip-arrow {
   border-bottom-color: white;
}

в ваш файл styles.css (я вижу, у вас это уже есть).

Что касается второго вопроса, нет, вы не можете сделатьграница, так как Треугольник - технически граница.Вы можете создать для него тень следующим образом: https://css -tricks.com / triangle-with-shadow / , но из удобства использования (плоский дизайн) и совместимости с браузером я рекомендую использовать один цвет для всплывающей подсказки-рамка и стрелка