更改宽度 Angular 驱动的 Bootstrap 工具提示答案

【问题标题】：Change width Angular powered Bootstrap tooltip更改宽度 Angular 驱动的 Bootstrap 工具提示
【发布时间】：2021-12-28 07:57:28
【问题描述】：

我想更改工具提示的宽度，但不知道如何为此编写 CSS 代码。 HTML 代码如下：

                    <th class="number">
                        <span class="header-content" jhiSortBy="sumPerAmount">
                            <span class="header-text" jhiTranslate="something.sumPerAmount" ngbTooltip="VERY_LONG_TOOLTIP_TEXT_VERY_LONG_TOOLTIP_TEXT_VERY_LONG_TOOLTIP_TEXT" tooltipClass="wide-tooltip">Sum per
                                amount</span>
                            <fa-icon class="sort-icon" [icon]="'sort'"></fa-icon>
                        </span>
                     </th>

CSS 代码：

.wide-tooltip .tooltip-inner{
background-color: darkgreen;
width: 300px;

}

【问题讨论】：

看起来没问题，您还需要将 CSS 中的 max-width 覆盖为 max-width: 300px;

标签： angular tooltip bootstrapper

【解决方案1】：

除了工具提示 CSS 样式的“封装”属性外，还必须在组件注释中指定。

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'tooltip-custom-class-example',
  templateUrl: 'tooltip-custom-class-example.html',
  styleUrls: ['tooltip-custom-class-example.css'],
  // Need to remove view encapsulation so that the custom tooltip style defined in
  // `tooltip-custom-class-example.css` will not be scoped to this component's view.
  encapsulation: ViewEncapsulation.None,
})

【讨论】：

【解决方案2】：

请阅读工具提示的customClass文档。

这里是 link 的文档，这里是 link 的 stackblitz 示例

【讨论】：

我已经尝试了您建议的解决方案，但仍然无法正常工作。我已经编辑了我的问题，所以你可以看到我做了什么。
stackblitz.com/edit/… 这是一个工作示例的链接。我看到的是，在演示示例的官方网站中，他们在组件 ts 文件中使用encapsulation: ViewEncapsulation.None,。添加此行后，自定义类运行良好。

【解决方案3】：

引导工具提示

如果您需要不同的自定义工具提示，请执行以下操作：

假设您想要有两种不同的工具提示样式并保留主引导工具提示：

1-将自定义样式添加到主styles.css文件中：

::ng-deep .primary-tooltip .tooltip-inner {
    background-color: yellow;
    color: black;
}
::ng-deep .secondary-tooltip .tooltip-inner {
    background-color: red;
    color: black;
}

2-实现如下所示的HTML：

<div title="bootstrap tooltip" data-bs-toggle="tooltip" data-bs-placement="top"></div>
<div title="primary" data-bs-custom-class="primary-tooltip" data-bs-toggle="tooltip" data-bs-placement="top"></div>
<div title="secondary" data-bs-custom-class="secondary-tooltip" data-bs-toggle="tooltip" data-bs-placement="top"></div>

【讨论】：