如何设计一个特定的angular-ui-bootstrap工具提示以使其更宽？

Question

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

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

...但如果我不想让所有工具提示更广泛，只需一个特定的工具提示，该怎么办？

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

Answer 1

如果另一方面你有db.collection.update( { "_id" :56c58adf4f40}, { $set: { "data": "test" } } ，你可以使用@Daryn代码的以下修改版本

CSS

tooltip-append-to-body="true"

HTML

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

Answer 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 插入 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将仅选择此插入的工具提示，这是一个相邻的sibiling。后代.tooltip-inner最大宽度样式不会影响所有工具提示，只会影响tooltip-400max类元素的工具提示。