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

Question

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

我有一个需要容纳长文本的工具提示.SO问题的答案在Bootstrap工具提示中显示长文本向我展示了如何使工具提示更广泛......

...但是,如果我不想让所有工具提示更宽,只是一个特定的工具提示怎么办？

(注意:AngularJS 1.2.24,jQuery可用......但我宁愿能够将样式应用于单个工具提示而不是更复杂)

Answer 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>

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关键是相邻的兄弟选择器,+.

这是因为,正如你可能知道,当你将鼠标悬停在部件1,在提示插入作为一个div 后 部件1,大约是这样的:

<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最大宽度样式不会影响所有工具提示,只会影响具有tooltip-400max类的元素的工具提示.