CODEWITHSUNDEEP
htmlangularng-bootstrap
Manish Jadhav
Manish Jadhav

Reputation: 13

How to change default color of ngbTooltip?

This is where I used ngbTooltip. How to change its color of text and background.

<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modal3" placement="end"
ngbTooltip="Will wait for action on file">Wait for a file</a></li>

Upvotes: 0

Views: 1243

Answers (3)

Ahsin Siddique
Ahsin Siddique

Reputation: 31

after spending some time with ngbtooltip I have fixed ngbtooltip arrow background color

.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: #0062A2 !important;
}

Upvotes: 0

Dwight
Dwight

Reputation: 320

You can apply custom css in tooltip by adding a class to it.

<a ngbTooltip="Will wait for action on file" tooltipClass="my-custom-class">Wait for a file</a></li>

In your CSS :

.my-custom-class .tooltip-inner {
    background-color: your-background-color-here;
    color: your-text-color-here;
 }

 .my-custom-class.bs-tooltip-top .tooltip-arrow::before {
     border-top-color: your-background-color-here;
 }

Upvotes: 1

Sohaib El Mediouni
Sohaib El Mediouni

Reputation: 195

Add a class in your html

<a class="dropdown-item"  data-bs-toggle="modal" data-bs-target="#modal3" placement="end"
[ngbTooltip]="Will wait for action on file" [tooltipClass]="mytooltip">Wait for a file</a></li>

and in your component.css

:host ::ng-deep mytooltip {
//whatever you want 
}

Upvotes: 0

Related Questions