How to add custom style to ngx-bootstrap/tooltip

问题

I have changed the background and border-colour for tooltip. The arrow in tooltip should be filled with white instead of dark and with the border. Is that possible

I have tried in StackBlitz

回答1:

Add this in your style.css file.

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

回答2:

You can set the arrow to white by putting

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

in your app.component.css It affects only the children of app.component - I assume you want the style only locally.

Or for having them globally put

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

in your styles.css (I see you already have it there).

As for the second question, no you cannot make a border, since the Triangle IS technically a border. You can make a shadow for it like this: https://css-tricks.com/triangle-with-shadow/ but from usability (flat-design) and browser-compatibility I recommend using one color for tooltip-border and arrow

来源：https://stackoverflow.com/questions/50409800/how-to-add-custom-style-to-ngx-bootstrap-tooltip