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]
})

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

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>

View more solutions

Comments

[Mick]

Unfortunately ::ng-deep is also deprecated

[13hola]

Article Link Can't open

[khollenbeck]

@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.

[GregJF]

That doesn't work You need encapsulation: ViewEncapsulation.None on the component