Question

我想更改工具提示的宽度，但无法弄清楚该如何编写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;

}

Answer 1

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

。

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

Answer 2

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

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

更改宽度角动力引导工具提示

2 个答案: