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

157

В настоящее время я использую функцию ниже для создания текста, который будет отображаться с помощью плагина всплывающей подсказки Bootstrap. Почему многострочные всплывающие подсказки только работают,  а не работают \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

— Мэтью Хуэй
источник

1

Вы понимаете разницу между \ n и в HTML?

— Коул Джонсон

2

будет работать на стороне рендеринга 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, на самом деле они должны быть настоящими символами новой строки. В качестве альтернативы, вы можете использовать закодированные символы новой строки , но это, вероятно, даже менее желательно, чем использование  символов.

— Чад фон Нау
источник

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 test... 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
источник

2

В Angular UI Bootstrap 0.13.X tooltip-html-unsafe устарела. Теперь вы должны использовать tooltip-html и $ sce.trustAsHtml () для создания всплывающей подсказки с помощью html.

https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

— soote
источник

0

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

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

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

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