Как я могу создать только одну специальную всплывающую подсказку angular -ui-bootstrap для расширения?

В моем приложении AngualrJS мы используем всплывающие подсказки angular -ui-bootstrap.

У меня есть одна подсказка, которая должна содержать длинный текст. Ответ на вопрос SO Отображение длинного текста в всплывающей подсказке Bootstrap показывает мне, как сделать всплывающие подсказки шире...

... но что, если я не хочу делать все всплывающие подсказки более широкими, просто одна конкретная подсказка?

(Примечания: AngularJS 1.2.24, jQuery доступен... но я бы скорее просто применить стиль к этой единственной подсказке, чем усложнить)

Ответ 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>

Ответ 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 после, примерно так:

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