Wie mache ich Twitter Bootstrap Tooltips mit mehreren Zeilen?

157

Ich verwende derzeit die folgende Funktion, um Text zu erstellen, der mit dem Tooltip-Plugin von Bootstrap angezeigt wird. Wie kommt es, dass mehrzeilige Tooltips nur funktionieren <br>und nicht \n? Ich bevorzuge, dass die Titelattribute meiner Links kein HTML enthalten.

Was funktioniert

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

Was ich möchte

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end
javascript html css twitter-bootstrap Matthew Hui
quelle
1
Verstehst du den Unterschied zwischen \ n und <br/> in HTML?
Cole Johnson
2
<br/> funktioniert auf der HTML-Rendering-Seite, während / n Ihren HTML-Code nur in einer neuen Zeile
anzeigt
Ich habe mir einige andere Websites angesehen und sie haben mehrzeilige Tooltips ohne den br
Matthew Hui

Antworten:

265

Sie können white-space:pre-wrapauf dem Tooltip verwenden. Dadurch respektiert der Tooltip neue Zeilen. Zeilen werden weiterhin umbrochen, wenn sie länger als die standardmäßige maximale Breite des Containers sind.

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

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

Wenn Sie verhindern möchten, dass Text umbrochen wird, gehen Sie stattdessen wie folgt vor.

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

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

Keines von diesen funktioniert mit einem \nim HTML, es müssen tatsächlich tatsächliche Zeilenumbrüche sein. Alternativ können Sie codierte Zeilenumbrüche verwenden &#013;, dies ist jedoch wahrscheinlich noch weniger wünschenswert als die Verwendung von <br>'s.

Chad von Nau
quelle
1
Wie macht man das mit einem Popover?
aaa90210
1
@ aaa90210 könnten Sie versuchen .popover-content { white-space:pre-wrap; }. Abhängig von Ihrem Inhalt .popover-content p { white-space:pre-wrap; }oder ähnlichem sieht es möglicherweise besser aus.
Chad von Nau
Ist es möglich, JSP-Variablen in einem Tooltip wie diesem anzuzeigen? Ich habe versucht <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. Aber es gibt dies: aaabbbccc (verkettete Zeichenfolgen).
Zygimantus
1
.tooltip-inner {white-space: pre-line;} arbeitet für mich.
Kishor K
Die
Vorzeile
221

Sie können die HTML-Eigenschaft verwenden: 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
quelle
1
Sie haben die Bootstrap 2.0.2 (js only)Option in Ihrer jsFiddle nicht aktiviert, sodass sie beim ersten Start nicht funktioniert (offen). Markieren und speichern Sie es, damit andere nicht entsprechen, dass Ihr Beispiel nicht funktioniert.
Trejder
56

Wenn Sie den Twitter Bootstrap Tooltip für ein Element ohne Link verwenden, können Sie angeben, dass Sie einen mehrzeiligen Tooltip direkt im HTML-Code ohne Javascript verwenden möchten, indem Sie nur den folgenden dataParameter verwenden:

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

Dies ist nur eine alternative Version der Antwort von costales . Alle Ehre geht an ihn! :]

Trejder
quelle
2
Warum sagst du "Nicht-Link-Element"? Ich habe dies über einen Link versucht und es schien gut zu funktionieren.
ec2011
2
Nun ... ich erinnere mich nicht! :] Nach fünf Monaten habe ich mich geirrt. Ich weiß auch nicht, warum es nicht an Links funktionieren sollte. Entschuldigung ...
Trejder
1
Dieser hat bei mir funktioniert, besonders wenn Sie Tooltips mit Javascript auslösen. Dieser wird in das Element selbst geladen, danke!
Leo
0

Die CSS-Lösung für Angular Bootstrap ist

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

Sie müssen kein übergeordnetes Element oder keine Klassenauswahl verwenden, wenn Sie die Verwendung nicht einschränken müssen. Kopieren / Pasta, und diese Regel gilt für alle Unterkomponenten

Antonis
quelle