CODEWITHSUNDEEP
cssangularngx-bootstrap
Reddy Bhavani Prasad
Reddy Bhavani Prasad

Reputation: 1115

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

Upvotes: 4

Views: 10737

Answers (3)

ewomack
ewomack

Reputation: 667

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

Upvotes: 0

BeeBee8
BeeBee8

Reputation: 3074

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

Upvotes: 4

Phil
Phil

Reputation: 7566

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

Upvotes: 3

Related Questions