Width and background color of ng bootstrap tooltip

Question

I need to modify the width of the tooltip box and the background of it too. How can I achieve it? I am using angular2 and ng bootstrap.

<i class="fa fa-info-circle info-icon-background" [ngbTooltip]="tooltipContent" aria-hidden="true" ></i>

I have tried putting the following in my "task-modal.component.css" css file but it does not seem to work. Please help.

.tooltip-inner{
  width: 400px;
  background-color: #FFFFFF;
}

In my angular component, I specify the css file as:

@Component({
  selector: 'task-modal',
  templateUrl: './task-modal.component.html',
  styleUrls: ['task-modal.component.css'],
  providers: [TasksService]
})

Where is `.tooltip-inner`? I do not see this class in the HTML you posted. Also where is your CSS file located? If it is part of your component then it is encapuslated to your component and you would probably need to use `>>>` or `/deep/` for .scss to break encapsulation. — khollenbeck, Jun 21 '17 at 17:09

score 13 · Answer 1 · answered May 16 '18 at 17:58

13

add this in your css file, in your case task-modal.component.css,

Angular 2:

/deep/ .tooltip-inner {
 width: 400px;
 background-color: #FFFFFF;
}

Angular 4.3.0

/deep/ was deprecated in Angular 4.3.0 and ::ng-deep is now preferred,

::ng-deep .tooltip-inner {
     width: 400px;
     background-color: #FFFFFF;
}

answered May 16 '18 at 17:58

Anudeep

289
3
8

1

Unfortunately ::ng-deep is also deprecated – Mick Mar 12 '19 at 08:31
in my case, worked for me like this ```::ng-deep .tooltip > .tooltip-inner { background-color: red !important; }``` – Waleed Ahmad Mar 09 '23 at 09:12

khollenbeck · Answer 2 · 2019-06-03T15:39:16.067

4

I think you are trying to style an element that is outside of your component's encapsulation.

Give this a shot:

:host >>> .tooltip-inner {
  width: 400px;
  background-color: #FFFFFF;
}

Note: The use of /deep/ and >>> in Angular 2

>>> Appears to be deprecated. Best way is to have a global style sheet for styles that need to break encapsulation.

You can also break the components encapsulation for styling with the following. encapsulation: ViewEncapsulation.None However, I personally prefer breaking it on a case by case basis.

@Component({
  selector: 'task-modal',
  templateUrl: './task-modal.component.html',
  styleUrls: ['task-modal.component.css'],
  providers: [TasksService],
  encapsulation: ViewEncapsulation.None
});

Documentation

https://angular.io/api/core/ViewEncapsulation

edited Jun 03 '19 at 15:39

answered Jun 21 '17 at 18:08

khollenbeck

16,028
18
66
101

Article Link Can't open – 13hola Jun 03 '19 at 05:38
@13hola, Thanks, I think that was probably the wrong link, not sure what I intended to link there. I am thinking I meant to put the angular doc links there instead. – khollenbeck Jun 03 '19 at 15:15

score 3 · Answer 3 · answered Nov 25 '19 at 22:03

did you make sure to set encapsulation to ViewEncapsulation.None in the ts file of the component?

@Component({
  selector: 'task-modal',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './task-modal.component.html',
  styleUrls: ['task-modal.component.css'],
  providers: [TasksService]
})

in the html add a tooltipClass:

<i class="fa fa-info-circle info-icon-background" tooltipClass="custom-tooltip-class" [ngbTooltip]="tooltipContent" aria-hidden="true" ></i>

and in your css styles use the custom class:

.custom-tooltip-class .tooltip-inner{
   width: 400px;
   background-color: #FFFFFF;
}

.custom-tooltip-class .arrow::before {
   border-top-color: #FFFFFF;
}

https://ng-bootstrap.github.io/#/components/tooltip/examples

score 1 · Answer 4 · answered Oct 25 '19 at 11:39

1

You can use custom class, define it:

.my-custom-class .tooltip-inner {
  max-width: 400px;
  width: 400px;
}

and use in tooltip:

<button type="button" class="btn btn-outline-secondary" ngbTooltip="Nice class!"
  tooltipClass="my-custom-class">
  Tooltip with custom class
</button>

answered Oct 25 '19 at 11:39

michal.jakubeczy

8,221
1
59
63

That doesn't work You need encapsulation: ViewEncapsulation.None on the component – GregJF Mar 11 '22 at 02:45

Width and background color of ng bootstrap tooltip

4 Answers4

Linked