ngx-bootstrap with bootstrap3 set tooltip width

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

将 class 添加到您的元素，并将 min-width 放入 css 中的 class。

html

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

css

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

如果你想获得 tooltip 的实际宽度，你可以在你的元素中使用 [style.width]="foo"。你所要做的就是在你的组件中创建一个 foo var 和 get/set 宽度。注意：不要忘记值中的 ;（即 150px;）

Answer 2

在 Gaspar 的大力帮助下，最终完成了这项工作。结果是最大宽度属性让我需要同时设置 .bottom 和 inner.

.tooltip-wide .tooltip.bottom, .tooltip-inner  {
  max-width: none;
}

<a [tooltip]='acctTooltip' class='tooltip-wide' placement='bottom'>blah blah</a>

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

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

ngx-bootstrap 使用 class“.tooltip”创建一个同级元素，可以使用“~”一般同级 select 或 selected。

工具提示的实际宽度由一个名为“.tooltip-inner”的 class 控制，它是 select 使用后代 select 或（只是一个 space 在 classes/elements/etc.).

之间

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

将所有这些放在一起得到上面的 CSS select 或。

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

ngx-bootstrap with bootstrap3 set tooltip width

ngx-bootstrap with bootstrap3 set tooltip width

twitter-bootstrap-3

ngx-bootstrap

angular