it-swarm.com.de

Wie können Twitter-Bootstrap-Tooltips aus mehreren Zeilen bestehen?

Ich verwende derzeit die folgende Funktion, um Text zu erstellen, der mit dem Tooltip-Plugin von Bootstrap angezeigt wird. Wie funktionieren mehrzeilige Tooltips nur mit <br> und nicht mit \n? Ich bevorzuge es, dass in den Titelattributen meiner Links keine HTML-Dateien vorhanden sind. 

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
146
Matthew Hui

Sie können white-space:pre-wrap in der QuickInfo verwenden. Dies bewirkt, dass der Tooltip neue Zeilen berücksichtigt. Zeilen werden immer noch umgebrochen, wenn sie länger als die Standardbreite des Containers sind.

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

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

Wenn Sie verhindern möchten, dass Text umbrochen wird, führen Sie stattdessen die folgenden Schritte aus.

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

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

Keines davon funktioniert mit einem \n in der HTML-Datei, es muss sich um tatsächliche Zeilenumbrüche handeln. Alternativ können Sie verschlüsselte Zeilenumbrüche &#013; verwenden. Dies ist jedoch wahrscheinlich weniger wünschenswert als die Verwendung von <br>.

250
Chad von Nau

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})
210
costales

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

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

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

51
trejder

Wenn Sie Angular UI Bootstrap verwenden, können Sie die QuickInfo mit der HTML-Syntax verwenden: tooltip-html-unsafe

z. B. Aktualisierung auf Winkel 1.2.10 und Winkel-Ui-Bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

alte: http://jsfiddle.net/8LMwz/1/

16
chakming

In Angular UI Bootstrap 0.13.X wurde tooltip-html-unsafe nicht mehr unterstützt. Sie sollten jetzt tooltip-html und $ sce.trustAsHtml () verwenden, um einen Tooltip mit html durchzuführen.

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>!');
2
soote

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

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

Es ist nicht erforderlich, ein übergeordnetes Element oder einen Klassenselektor zu verwenden, wenn Sie die Verwendung von . Copy/Pasta nicht einschränken müssen 

0
Antonis