CODEWITHSUNDEEP
cssstylestooltiptwitter-bootstrap-tooltip
Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

Apply custom styles to ngbtooltip in angular

I want to apply custom style to my tooltip as shown in image.

enter image description here

Please help me..
Thanks

Upvotes: 2

Views: 5801

Answers (3)

Ousama
Ousama

Reputation: 2800

I fixed this issue by using the tooltipClass attribute and adding some css code:

::ng-deep .my-custom-class .tooltip-inner {
    background-color: white;
}

::ng-deep .my-custom-class .tooltip-arrow::before {
    border-bottom-color: white;
}

NB: You need to add ::ng-deep before all your CSS selectors.

Upvotes: 1

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

Finally, I got the answer. This is the answer to get desire output

<a class="btn mr-5" ngbTooltip="Upload new documents" tooltipClass="custom-tooltip" placement="bottom">
   <img src="/assets/images/instantiate-worklist-btn.png" />
</a>

.custom-tooltip .tooltip-inner {
  background: #59ADFF !important;
  padding: 10px;
  font-size: 14px !important;
  position: absolute;
  right: 5px;
  width: 300px;
}

.custom-tooltip .arrow::before {
  border-bottom-color: #59ADFF !important;
}

Upvotes: 0

Draugael
Draugael

Reputation: 66

you can change the style with the attribute tooltipClass and a style for the new class.

<button type="button" ngbTooltip="Upload new document" tooltipClass="my-custom-class">
  <img src="plus_button.jpg">
</button>

.my-custom-class .tooltip-inner {
   background-color: lightblue;
}

.my-custom-class .arrow::before {
   border-top-color: lightblue;
}

Upvotes: 5

Related Questions