ng bootstrap工具提示的宽度和背景色 [英] Width and background color of ng bootstrap tooltip

问题描述

我还需要修改工具提示框的宽度及其背景.我该如何实现?我正在使用angular2和ng bootstrap.

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>

我尝试将以下内容放入"task-modal.component.css" css文件中，但似乎不起作用.请帮忙.

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

在我的角度组件中，我将css文件指定为:

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

推荐答案

将此添加到您的css文件中，在您的情况下 task-modal.component.css ，

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

角度2:

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

Angular 4.3.0

Angular 4.3.0

/deep/为 Angular 4.3.0中已弃用，现在首选:: ng-deep，

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

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

这篇关于ng bootstrap工具提示的宽度和背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！