Question

我需要修改工具提示框的宽度及其背景。我怎样才能实现它？我正在使用angular2和ng bootstrap。

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

我已尝试将以下内容放入我的＆＃34; task-modal.component.css＆＃34; 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]
})

Answer 1

在你的css文件中添加它，在你的情况下 task-modal.component.css ，

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

Answer 2

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

试一试：

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

您还可以使用以下内容破坏样式的组件封装。 encapsulation: ViewEncapsulation.None但是，我个人更喜欢逐个打破它。

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

有用的文章：

http://jira.infor.com/browse/HFC-4016

Answer 3

您可以使用自定义类，对其进行定义：

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

Answer 4

您确定要在组件的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

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

4 个答案: