В моем приложении AngualrJS мы используем всплывающие подсказки angular -ui-bootstrap.
У меня есть одна подсказка, которая должна содержать длинный текст. Ответ на вопрос SO Отображение длинного текста в всплывающей подсказке Bootstrap показывает мне, как сделать всплывающие подсказки шире...
... но что, если я не хочу делать все всплывающие подсказки более широкими, просто одна конкретная подсказка?
(Примечания: AngularJS 1.2.24, jQuery доступен... но я бы скорее просто применить стиль к этой единственной подсказке, чем усложнить)
Если, с другой стороны, у вас есть 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>
Пока у вас нет 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.