ngx-bootstrap 与 bootstrap3 设置工具提示宽度

Question

我需要增加 ngx-bootstrap 工具提示的宽度，我已经尝试了所有我能找到的解决方案，但都没有成功。

HTML：

<a [tooltip]='acctTooltip' placement='bottom'>{{item.AccountNumber}}
...
<ng-template #acctTooltip>
    <!--TODO: figure out how to get the tooltip width to widen-->
    <div>
        <table>
            <tr>
                <th>Title &amp; Address:</th>
                <td>
                    {{item.Title1}}<br /> {{item.Title2}}
                    <br /> {{item.Title3}}
                    <br />
                </td>
            </tr>
            <tr>
                <th>C/M:</th>
                <td>{{item.CreditType}}</td>
            </tr>
            <tr>
                <th>ServiceType:</th>
                <td>{{item.ServiceType}}</td>
            </tr>
            <tr>
                <th>Role:</th>
                <td>{{item.Role[0].Capacity}}</td>
            </tr>
        </table>
    </div>
</ng-template>

[更新] 将它放在 style.css 中确实会导致它旋转 45 度（用于验证），背景可以缩小但不能扩展。所以在内部 html 中有更多的东西。

.tooltip.bottom  {
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-right: none;
    max-width: none;
    height: 10px;
    transform: rotate(45deg);
    background: white;
}

Answer 1

这是使用 ngx-bootstrap V3.3.0 对我有用的方法。

HTML

<div class=" tooltip-350" [tooltip]="LONG_TOOLTIP_TEXT" placement="top">
   Hover Over me!
</div>

CSS

::ng-deep .tooltip-350 ~ .tooltip .tooltip-inner {
  max-width: 350px;
  min-width: 350px;
}

添加了自定义类“.tooltip-350”，以便能够唯一地选择应用工具提示的容器。

ngx-bootstrap 创建了一个类“.tooltip”的兄弟元素，可以使用“~”通用兄弟选择器来选择。

工具提示的实际宽度由一个名为“.tooltip-inner”的类控制，该类使用后代选择器（只是类/元素/等之间的空间）选择。

"::ng-deep" 是必需的，因为这是在子组件中选择一个元素，而不是直接在组件中选择一个元素。或者，这些样式可以添加到全局样式表中，而无需“::ng-deep”。

将所有这些放在一起给出了上面的 CSS 选择器。

在这种情况下，控制宽度的属性是“min-width”和“max-width”，因此通过将其设置为所需的任何值，可以更改工具提示的宽度。