ng bootstrap 工具提示的宽度和背景颜色答案

【问题标题】：Width and background color of ng bootstrap tooltipng bootstrap 工具提示的宽度和背景颜色
【发布时间】：2017-11-24 16:56:07
【问题描述】：

我还需要修改提示框的宽度和背景。我怎样才能实现它？我正在使用 angular2 和 ng 引导程序。

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

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

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

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

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

【问题讨论】：

.tooltip-inner 在哪里？我在您发布的 HTML 中没有看到此类。还有你的 CSS 文件在哪里？如果它是您的组件的一部分，那么它会被封装到您的组件中，您可能需要使用 >>> 或 /deep/ 用于 .scss 来打破封装。

标签： angular tooltip ng-bootstrap

【解决方案1】：

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

角度 2：

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

Angular 4.3.0

/deep/ 是 deprecated in Angular 4.3.0，现在首选 ::ng-deep，

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

【讨论】：

不幸的是 ::ng-deep 也被弃用了

【解决方案2】：

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

试一试：

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

注意： The use of /deep/ and >>> in Angular 2

>>> 似乎已被弃用。最好的方法是为需要打破封装的样式创建一个全局样式表。

您还可以通过以下方式打破组件封装以进行样式设置。 encapsulation: ViewEncapsulation.None 但是，我个人更喜欢根据具体情况来打破它。

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

文档

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

【讨论】：

文章链接打不开
@13hola，谢谢，我认为这可能是错误的链接，不确定我打算在那里链接什么。我想我的意思是把角度文档链接放在那里。

【解决方案3】：

您确定在组件的 ts 文件中将 encapsulation 设置为 ViewEncapsulation.None 吗？

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

并在您的 css 样式中使用自定义类：

.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

【讨论】：

【解决方案4】：

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

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

【讨论】：