如何設計一個特定的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，在提示插入部件1作為后一個div，大約是這樣的：

<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類的元素的tooltip-400max 。