Angular ng引导工具提示的宽度和背景色

我需要修改工具提示框的宽度和背景。我怎样才能做到呢？我正在使用angular2和ng引导

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

在我的angular component中，我将css文件指定为：

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

---

我认为您正在尝试设置组件封装之外的元素的样式

试一试：

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

注意：

>

似乎已被弃用。最好的方法是为需要破坏封装的样式提供一个全局样式表

您还可以使用以下命令打破组件封装以进行样式设置<代码>封装：视图封装。无但是，我个人更喜欢根据具体情况进行分解

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

文档

---

在您的css文件中添加此选项，在您的示例中为任务模式.component.css

角度2：

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

角度4.3.0

/deep/过去是，现在首选的是：：ng deep

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

---

您可以使用自定义类，定义它：

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

并在工具提示中使用：

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

自定义类的工具提示

您是否确保在组件的ts文件中将

封装设置为
查看封装。无

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

在html中添加tooltipClass：

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

哪里是
。工具提示内部
？我在你发布的HTML中没有看到这个类。你的CSS文件在哪里？如果它是组件的一部分，那么它将封装到组件中，您可能需要使用
>>
或
/deep/
for.scs来破坏封装。不幸的是：：ng deep也不推荐使用Darticle链接无法open@13hola，谢谢，我想那可能是错误的链接，不确定我打算在那里链接什么。我想我是想把有角度的文档链接放在那里。
<i class="fa fa-info-circle info-icon-background" tooltipClass="custom-tooltip-class" [ngbTooltip]="tooltipContent" aria-hidden="true" ></i>

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

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