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

在您的元素中添加一个类，并将min-width放入CSS中的类。

html

<a class="tooltip-acct" [tooltip]='acctTooltip' placement='bottom'>{{item.AccountNumber}}

css

.tooltip-acct { min-width: 150px; }

如果要获取tooltip的实际宽度，可以在元素中使用[style.width]="foo"。他们要做的就是在组件中创建一个foo var并获取/设置宽度。注意：请不要忘记值{{1}中的;

Answer 2

在加斯帕尔的出色帮助下，最终实现了这一目标。原来max-width属性吸引了我，需要同时设置.bottom和inner。

Day answer = (Day) remainder;

Answer 3

这是使用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选择器。

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

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

3 个答案: