如何将一个特定的 angular-ui-bootstrap 工具提示设置为更宽？答案

【问题标题】：How do I style just one specific angular-ui-bootstrap tooltip to be wider?如何将一个特定的 angular-ui-bootstrap 工具提示设置为更宽？
【发布时间】：2016-02-18 20:26:30
【问题描述】：

在我的 AngualrJS 应用程序中，我们使用 angular-ui-bootstrap 工具提示。

我有一个工具提示需要容纳长文本。 SO问题Displaying long text in Bootstrap tooltip的答案向我展示了如何使工具提示更宽...

...但是如果我不想让所有工具提示更宽，而只是一个特定的工具提示呢？

（注意：AngularJS 1.2.24，jQuery 可用...但我宁愿能够将样式应用于单个工具提示，而不是变得更复杂）

【问题讨论】：

你为什么不接受你自己的答案？
@Sampath ha，谢谢，错过了：)

标签： css angular-ui-bootstrap

【解决方案1】：

另一方面，如果您有tooltip-append-to-body="true"，您可以使用@Daryn 代码的以下修改版本

CSS

.tooltip-400max .tooltip-inner {
  max-width: 400px;
}

HTML

<div id="element1"
  tooltip-append-to-body="true"
  tooltip-class="tooltip-400max"
  tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>

【讨论】：

由于在 2015 年夏季 angular-ui v0.13.0 中引入了 tooltip-class，因此这比我原来的答案更好
这也适用于popover；只需使用popover-class。

【解决方案2】：

只要你没有tooltip-append-to-body="true"，你可以使用下面的CSS（在这个例子中，使工具提示的最大宽度为400px）：

CSS

.tooltip-400max + .tooltip .tooltip-inner {
  max-width: 400px;
}

HTML

<div id="element1"
     class="tooltip-400max"
     tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>

上面 CSS 中的关键是 相邻兄弟选择器，+。

这是因为，您可能知道，当您将鼠标悬停在 element1 上时，工具提示会以 div after element1 的形式插入，大致类似于这个：

<div id="element1"
     class="tooltip-400max"
     tooltip="{{ model.longTooltip }}">Text</div>
<div class="tooltip fade in" and other stuff>...</div>
<div>More page content</div>

因此 CSS 选择器 .tooltip-400max + .tooltip 将只选择这个插入的工具提示，它是一个相邻的兄弟。后代.tooltip-inner max-width 样式不会影响所有工具提示，只会影响具有tooltip-400max 类的元素的工具提示。

【讨论】：

@das 你调整了什么属性，width 还是max-width？顺便说一句，为了调试你的样式，我想暂时将tooltip-trigger="click" 添加到元素中，这样工具提示就会保持可见，让我可以在浏览器开发者工具中尝试不同的样式。
另一个快速调试选项是右键单击工具提示，然后单击开发者控制台（无论如何都可以在 Chrome 中使用）
我已将接受的答案更改为@TMG。正如 TMG 指出的那样，tooltip-class 现在可用（去年夏天在 v0.13.0 中引入），这是应用样式的一种更清晰的方式。这个答案仍然适用于任何使用 ui-boostrap v0.12 或更低版本的人。