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

153

В настоящее время я использую следующую функцию для создания текста, который будет отображаться с помощью плагина всплывающей подсказки. Как многострочные всплывающие подсказки работают только с <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
  • 1
    Вы понимаете разницу между \ n и <br/> в HTML?
  • 2
    <br/> будет работать на стороне рендеринга HTML, в то время как / n будет отображать ваш HTML-код только в новой строке
Показать ещё 1 комментарий
Теги:

7 ответов

262
Лучший ответ

Вы можете использовать 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/

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

Поделиться
  • 1
    Теперь, как вы делаете это с поповером.
  • 1
    @ aaa90210 вы можете попробовать .popover-content { white-space:pre-wrap; } В зависимости от вашего контента, .popover-content p { white-space:pre-wrap; } или что-то подобное, может выглядеть лучше.
Показать ещё 3 комментария
199

Вы можете использовать свойство 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})
Поделиться
  • 0
    Вы не отметили опцию Bootstrap 2.0.2 (js only) в jsFiddle, которая не работает при первом запуске (open). Отметьте и сохраните его, чтобы другие не подчинялись, чтобы ваш пример не работал.
  • 3
    html: true + &#013; работа для меня!
51

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

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

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

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

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

например. обновить до Angular 1.2.10 и angular -ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

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

Поделиться
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>!');
Поделиться
0
  1. /*FOR ALLOWING THE WHITESPACE IN TOOLTIP*/.tooltip-inner { white-space: pre-wrap; }
  2. title="Line &#10;Line &#10; Line 3

ИСПОЛЬЗУЙТЕ ЭТУ КОМБИНАЦИЮ. ЭТО РАБОТАЕТ ДЛЯ МЕНЯ.

Поделиться
0

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню