Bagaimana cara membuat Twitter Bootstrap tooltips memiliki beberapa baris?

157

Saat ini saya menggunakan fungsi di bawah ini untuk membuat teks yang akan ditampilkan menggunakan plugin toolstrip Bootstrap. Kenapa tooltips multiline hanya bekerja dengan <br>dan tidak \n? Saya lebih suka bahwa tidak ada HTML dalam atribut judul tautan saya.

Pekerjaan apa

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

Apa yang saya inginkan

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end
javascript html css twitter-bootstrap Matthew Hui
sumber
1
Apakah Anda memahami perbedaan antara \ n dan <br/> dalam HTML?
Cole Johnson
2
<br/> akan bekerja di sisi rendering html, sementara / n hanya akan menampilkan kode html Anda di baris baru
rajesh kakawat
Saya sedang melihat beberapa situs web lain dan mereka memiliki tooltip multiline tanpa br
Matthew Hui

Jawaban:

265

Anda bisa menggunakannya white-space:pre-wrapdi tooltip. Ini akan membuat tooltip menghormati baris baru. Garis-garis masih akan membungkus jika lebih panjang dari lebar maks-standar wadah.

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

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

Jika Anda ingin mencegah pembungkus teks, lakukan yang berikut.

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

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

Tak satu pun dari ini akan bekerja dengan \ndalam html, mereka harus benar-benar baris baru. Atau, Anda dapat menggunakan baris baru yang disandikan &#013;, tapi itu mungkin bahkan lebih tidak diinginkan daripada menggunakan <br>.

Chad von Nau
sumber
1
Sekarang bagaimana Anda melakukannya dengan popover.
aaa90210
1
@ aaa90210 Anda bisa mencoba .popover-content { white-space:pre-wrap; }. Tergantung pada konten Anda, .popover-content p { white-space:pre-wrap; }atau yang serupa, mungkin terlihat lebih baik.
Chad von Nau
Apakah mungkin untuk menampilkan variabel JSP di tooltip seperti ini? Saya sudah mencoba <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. Tapi ini memberikan ini: aaabbbccc (string bersambung).
zygimantus
1
.tooltip-inner {white-space: pre-line;} bekerja untuk saya.
Kishor K
pre-line bekerja untuk saya - semua yang lain membuat teks tidak selaras dengan benar
Adam Moisa
221

Anda dapat menggunakan properti 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
sumber
1
Anda belum memeriksa Bootstrap 2.0.2 (js only)opsi di jsFiddle Anda, yang membuatnya tidak berfungsi saat dijalankan awal (terbuka). Tandai dan simpan, jadi yang lain tidak akan patuh, bahwa contoh Anda tidak berfungsi.
Trejder
56

Jika Anda menggunakan Twitter Bootstrap Tooltip pada elemen non-tautan, Anda dapat menentukan, bahwa Anda ingin tooltip multi-line langsung dalam kode HTML, tanpa Javascript, hanya dengan menggunakan dataparameter:

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

Ini hanyalah versi alternatif dari jawaban costales . Semua kemuliaan jatuh padanya! :]

Trejder
sumber
2
Mengapa Anda mengatakan "elemen non-tautan"? Saya mencoba ini pada tautan dan sepertinya berfungsi dengan baik.
ec2011
2
Yah ... saya tidak ingat! :] Setelah lima bulan, saya pikir saya salah. Saya juga tidak tahu, mengapa itu tidak bisa berfungsi pada tautan. Maaf ...
trejder
1
Yang ini bekerja untuk saya, khususnya jika Anda memicu tooltips dengan javascript, ini akan dimuat dalam elemen itu sendiri, terima kasih!
Leo
16

Jika Anda menggunakan Bootstrap Angular UI, Anda dapat menggunakan tooltip dengan sintaks html: tooltip-html-unsafe

mis. perbarui ke angular 1.2.10 & angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

yang lama: http://jsfiddle.net/8LMwz/1/

gemetar
sumber
0

Solusi CSS untuk Angular Bootstrap adalah

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

Tidak perlu menggunakan elemen induk atau pemilih kelas jika Anda tidak perlu membatasi penggunaannya. Salin / Pasta, dan aturan ini akan berlaku untuk semua sub-komponen

Antonis
sumber