Как сделать так, чтобы всплывающие подсказки Twitter Bootstrap содержали несколько строк?

157

В настоящее время я использую функцию ниже для создания текста, который будет отображаться с помощью плагина всплывающей подсказки Bootstrap. Почему многострочные всплывающие подсказки только работают, <br>а не работают \n? Я предпочитаю, чтобы в атрибутах заголовка моих ссылок не было HTML.

Что работает

def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end

Что я хочу

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end
javascript html css twitter-bootstrap Мэтью Хуэй
источник
1
Вы понимаете разницу между \ n и <br/> в HTML?
Коул Джонсон
2
<br/> будет работать на стороне рендеринга html, в то время как / n будет отображать ваш html код только в новой строке
rajesh kakawat
Я смотрел на некоторые другие сайты, и у них есть многострочные всплывающие подсказки без br
Мэтью Хуэй

Ответы:

265

Вы можете использовать white-space:pre-wrapв подсказке. Это заставит всплывающую подсказку относиться к новым строкам. Строки будут по-прежнему переноситься, если они длиннее максимальной ширины контейнера по умолчанию.

.tooltip-inner {
    white-space:pre-wrap;
}

http://jsfiddle.net/chad/TSZSL/52/

Если вы хотите предотвратить перенос текста, сделайте следующее.

.tooltip-inner {
    white-space:pre;
    max-width:none;
}

http://jsfiddle.net/chad/TSZSL/53/

Ни один из них не будет работать с a \nв html, на самом деле они должны быть настоящими символами новой строки. В качестве альтернативы, вы можете использовать закодированные символы новой строки &#013;, но это, вероятно, даже менее желательно, чем использование <br>символов.

Чад фон Нау
источник
1
Теперь, как вы делаете это с поповером.
aaa90210
1
@ aaa90210 ты можешь попробовать .popover-content { white-space:pre-wrap; }. В зависимости от вашего контента, .popover-content p { white-space:pre-wrap; }или что-то подобное, может выглядеть лучше.
Чад фон Нау
Можно ли показывать переменные JSP во всплывающей подсказке, как это? Я пытался <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. Но это дает: aaabbbccc (сцепленные строки).
Зигимантус
1
.tooltip-inner {white-space: pre-line;} работает на меня.
Кишор К
предварительная линия работала для меня - все остальные сделали текст не выровненным должным образом
Адам Мойса
221

Вы можете использовать свойство html: http://jsfiddle.net/UBr6c/

My <a href="#" title="This is a<br />test...<br />or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})
Costales
источник
1
Вы не отметили Bootstrap 2.0.2 (js only)опцию в вашем jsFiddle, которая делает его не работающим при первом запуске (open). Отметьте и сохраните его, чтобы другие не подчинялись, чтобы ваш пример не работал.
Трейдер
56

Если вы используете всплывающую подсказку Twitter Bootstrap для не связанного элемента, вы можете указать, что вам нужна многострочная подсказка непосредственно в HTML-коде без Javascript, используя только dataпараметр:

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

Это всего лишь альтернативная версия ответа Косталес . Вся слава достается ему! :]

trejder
источник
2
Почему вы говорите «не связывающий элемент»? Я попробовал это по ссылке, и она, кажется, работает нормально.
ec2011
2
Ну ... я не помню! :] Через пять месяцев, думаю, я ошибся. Я также не знаю, почему это не должно работать над ссылками. Извините ...
Трейдер
1
Это сработало для меня, особенно если вы запускаете всплывающие подсказки с помощью javascript, это будет загружено в сам элемент, спасибо!
Лев
16

Если вы используете Angular UI Bootstrap, вы можете использовать всплывающую подсказку с синтаксисом html: tooltip-html-unsafe

например, обновление до угловой версии 1.2.10 и angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

старый: http://jsfiddle.net/8LMwz/1/

chakming
источник
0

Решение CSS для Angular Bootstrap - это

::ng-deep .tooltip-inner {
  white-space: pre-wrap;
}

Нет необходимости использовать родительский элемент или селектор класса, если вам не нужно ограничивать его использование. Копировать / вставить, и это правило будет применяться ко всем подкомпонентам

Антонис
источник