如何将自定义样式添加到 ngx-bootstrap/tooltip

Question

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

Answer 1

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

Answer 2

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;
}

Answer 3

In case this helps anyone, I was able to get rid of the arrow completely with:

.tooltip.top .tooltip-arrow {
   display: none;
}

You have to Change the ".top" to whichever type of tool tip you have (.bottom, .side, etc.) or else you will see no change.

And then the following customized the remainder of the tooltip:

.tooltip-inner {
    border: 1px solid #ddd;
    background-color: #fff;
    color : #000000;
}