Як зробити так, щоб підказки Bootstrap для 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

Я дивився на деякі інші веб-сайти, і вони мають підказки з багаторядкових інструментів без брата

— Меттью Хуй

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/

Жоден із них не буде працювати з \nhtml, вони повинні бути фактично новими рядками. Крім того, ви можете використовувати закодовані нові рядки , але це, мабуть, навіть менш бажано, ніж використання  's.

— Чад фон Нау
джерело

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-Internal {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})

— Косталес
джерело

1

Ви не перевірили Bootstrap 2.0.2 (js only)параметр у своєму jsFiddle, завдяки чому він не працює під час початкового запуску (відкрито). Позначте і збережіть його, щоб інші не виконували вимоги, щоб ваш приклад не працював.

— трейдер

56

Якщо ви використовуєте Twitter Bootstrap Tooltip для елемента, що не посилається, ви можете вказати, що потрібно багаторядковий підказку безпосередньо в HTML-коді, без Javascript, використовуючи лише dataпараметр:

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

Це лише альтернативна версія відповіді Костала . Вся слава йде йому! :]

— трейдер
джерело

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/

— чакмінг
джерело

2

У кутовому інтерфейсі Bootstrap 0.13.X інструмент-html-небезпечний застарілий. Тепер ви повинні використовувати 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

Рішення CSS для Angular Bootstrap є

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

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

— Антоніс
джерело