javascript - Twitter Bootstrap araç ipuçlarının birden çok satır olmasını nasıl sağlayabilirim?

Şu anda aşağıdaki fonksiyonu, Bootstrap’in tooltip eklentisi kullanılarak görüntülenecek metni oluşturmak için kullanıyorum. Çok satırlı tooltip’ler neden sadece <br> ile çalışıyor da \n ile çalışmıyor? Linklerimin title özniteliklerinde HTML olmamasını tercih ediyorum.

Ne işe yarar

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

Ne istiyorum

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end

Cevap #1

Araç ipucunda white-space:pre-wrap kullanabilirsiniz. Bu, araç ipucunun yeni satırları dikkate almasını sağlar. Satırlar, konteynerin varsayılan maksimum genişliğinden uzun olursa yine de kayacaktır.

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

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

Metnin kaymasını önlemek istiyorsanız, bunun yerine şunları yapın.

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

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

Hiçbiri HTML içinde \n ile çalışmaz, aslında gerçek yeni satırlar olmalıdır. Alternatif olarak, kodlanmış yeni satırlar &#013; kullanabilirsiniz, ancak bu muhtemelen <br> kullanmaktan bile daha az tercih edilir.

Cevap #2

HTML özelliğini kullanabilirsiniz: 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})

Cevap #3

Eğer Twitter Bootstrap Tooltip'i link olmayan bir öğede kullanıyorsanız, sadece data parametresini kullanarak Javascript olmadan, doğrudan HTML kodunda çok satırlı bir tooltip istediğinizi belirtebilirsiniz:

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

Bu sadece costales'in cevabının alternatif bir versiyonu. Tüm şan ona ait! :]

Cevap #4

Eğer Angular UI Bootstrap kullanıyorsanız, html sözdizimi ile tooltip kullanabilirsiniz: tooltip-html-unsafe

ör. angular 1.2.10 ve angular-ui-bootstrap 0.11'e güncelle: http://jsfiddle.net/aX2vR/1/

eski olan: http://jsfiddle.net/8LMwz/1/

İlgili makaleler