Jak sprawić, by podpowiedzi Twittera Bootstrap miały wiele linii?

157

Obecnie używam poniższej funkcji do tworzenia tekstu, który będzie wyświetlany za pomocą wtyczki podpowiedzi Bootstrap. Dlaczego wielowierszowe podpowiedzi działają tylko z, <br>a nie \n? Wolę, aby w atrybutach tytułu moich linków nie było kodu HTML.

Co działa

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

Czego chcę

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end
javascript html css twitter-bootstrap Matthew Hui
źródło
1
Czy rozumiesz różnicę między \ n a <br/> w HTML?
Cole Johnson
2
<br/> będzie działać po stronie renderowania html, podczas gdy / n wyświetli twój kod HTML tylko w nowej linii
rajesh kakawat
Przeglądałem kilka innych witryn internetowych i mają one wielowierszowe podpowiedzi bez br
Matthew Hui

Odpowiedzi:

265

Możesz użyć white-space:pre-wrapw podpowiedzi. Spowoduje to, że podpowiedź będzie uwzględniać nowe linie. Linie będą nadal zawijane, jeśli są dłuższe niż domyślna maksymalna szerokość kontenera.

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

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

Jeśli chcesz zapobiec zawijaniu tekstu, wykonaj następujące czynności.

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

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

Żadne z nich nie będzie działać z \nliterą a w html, w rzeczywistości muszą to być rzeczywiste znaki nowej linii. Alternatywnie, możesz użyć zakodowanych znaków nowej linii &#013;, ale jest to prawdopodobnie nawet mniej pożądane niż używanie <br>'s.

Chad von Nau
źródło
1
Teraz, jak to zrobić z popover.
aaa90210
1
@ aaa90210 możesz spróbować .popover-content { white-space:pre-wrap; }. W zależności od treści .popover-content p { white-space:pre-wrap; }lub czegoś podobnego może wyglądać lepiej.
Chad von Nau,
Czy można wyświetlać zmienne JSP w takiej podpowiedzi? Próbowałem <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. Ale daje to: aaabbbccc (połączone ciągi).
zygimantus
1
.tooltip-inner {white-space: pre-line;} pracuje dla mnie.
Kishor K
pre-line działał dla mnie - wszyscy inni zrobili źle wyrównany tekst
Adam Moisa
221

Możesz użyć właściwości 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})
Costales
źródło
1
Nie zaznaczyłeś Bootstrap 2.0.2 (js only)opcji w swoim jsFiddle, co powoduje, że nie działa przy pierwszym uruchomieniu (open). Zaznacz i zapisz, aby inne nie były zgodne, że Twój przykład nie działa.
trejder
56

Jeśli używasz Twitter Bootstrap Tooltip dla elementu niebędącego linkiem, możesz określić, że chcesz, aby wielowierszowa podpowiedź była umieszczana bezpośrednio w kodzie HTML, bez JavaScript, używając tylko dataparametru:

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

To tylko alternatywna wersja odpowiedzi kosturów . Cała chwała trafia do niego! :]

trejder
źródło
2
Dlaczego mówisz „element niebędący linkiem”? Próbowałem tego na linku i wydawało się, że działa dobrze.
ec2011
2
Cóż ... nie pamiętam! :] Po pięciu miesiącach myślę, że się myliłem. Nie wiem też, dlaczego nie powinno działać na linkach. Przepraszam ...
trejder
1
Ten zadziałał dla mnie, szczególnie jeśli wyzwalasz podpowiedzi za pomocą javascript, zostanie załadowany w samym elemencie, dzięki!
Leo
0

Rozwiązaniem CSS dla Angular Bootstrap jest

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

Nie ma potrzeby używania elementu nadrzędnego lub selektora klasy, jeśli nie musisz ograniczać ich użycia. Copy / Pasta, a ta reguła będzie miała zastosowanie do wszystkich komponentów podrzędnych

Antonis
źródło