Twitter Bootstrap araç ipuçlarının birden fazla satırı nasıl yapılır?

157

Şu anda Bootstrap araç ipucu eklentisi ile görüntülenecek metin oluşturmak için aşağıdaki işlevi kullanıyorum. Nasıl satırlı tek işi tooltips gelip  değil \n? Bağlantılarımın başlık özelliklerinde herhangi bir HTML olmamasını tercih ederim.

Ne çalışıyor

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

İstediğim

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

— Matthew Hui
kaynak

1

HTML'de \ n ve arasındaki farkı anlıyor musunuz?

— Cole Johnson

2

html oluşturma tarafında çalışacak, / n sadece html kodunuzu yeni satırda

— gösterecek

Diğer bazı web sitelerine bakıyordum ve br olmadan çok satırlı araç ipuçları var

— Matthew Hui

265

white-space:pre-wrapAraç ipucunda kullanabilirsiniz . Bu, ipucunun yeni satırlara saygı göstermesini sağlayacaktır. Çizgiler, kabın varsayılan maksimum genişliğinden daha uzunsa yine de sarılacaktır.

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

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

Metnin kaydırılmasını önlemek istiyorsanız, bunun yerine aşağıdakileri yapın.

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

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

Bunların hiçbiri html'de bir ile çalışmaz \n, aslında gerçek satırsonları olmalıdır. Alternatif olarak, kodlanmış yeni satırlar da kullanabilirsiniz , ancak bu muhtemelen  's kullanmaktan daha az istenir .

— Chad von Nau
kaynak

1

Şimdi bunu bir popover ile nasıl yapıyorsun?

— aaa90210

1

@ aaa90210 deneyebilirsiniz .popover-content { white-space:pre-wrap; }. İçeriğinize .popover-content p { white-space:pre-wrap; }veya benzer bir şeye bağlı olarak daha iyi görünebilir.

— Chad von Nau

JSP değişkenlerini bunun gibi araç ipuçlarında göstermek mümkün müdür? Denedim

<a href="#" rel="tooltip" title="${aaa}                        ${bbb}                        ${ccc}"                        class="example">Show</a>

. Ama bunu verir: aaabbbccc (birleştirilmiş dizeler).

— zygimantus

1

.tooltip-inner {white-space: pre-line;} benim için çalışıyor.

— Kishor K

ön-hat benim için çalıştı - diğerleri metin düzgün hizalanmadı

— Adam Moisa

221

Html özelliğini kullanabilirsiniz: http://jsfiddle.net/UBr6c/

My <a href="#" title="This is a test... or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

— Costales
kaynak

1

Sen işaretli değil Bootstrap 2.0.2 (js only)başlangıçtaki vadede (açık) de çalışmıyor yapar jsFiddle, seçeneği. İşaretleyin ve kaydedin, böylece diğerleri uymaz, örneğin işe yaramaz.

— trejder

56

Eğer kullanıyorsanız Heyecan Bootstrap olmayan bağlantı elemanı üzerinde Tooltip, sadece kullanarak, Javascript olmadan, HTML kodunda doğrudan çok satırlı ipucu istediğinizi belirtebilirsiniz dataparametreyi:

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

Bu, kostallerin cevabının sadece alternatif bir versiyonudur . Bütün görkem ona gider! :]

— Trejder
kaynak

2

Neden "bağlantısız eleman" diyorsunuz? Bunu bir bağlantı üzerinde denedim ve iyi çalışıyor gibi görünüyordu.

— ec2011

2

Şey ... Hatırlamıyorum! :] Beş ay sonra bence yanıldım. Ayrıca bilmiyorum, neden bağlantılar üzerinde çalışmamalı. Üzgünüm ...

— Trejder

1

Bu benim için çalıştı, özellikle javascript ile araç ipuçları tetikliyorsanız, bu elemanın kendisine yüklenecektir, teşekkürler!

— Leo

16

Açısal UI Bootstrap kullanıyorsanız, html sözdizimine sahip araç ipucunu kullanabilirsiniz: tooltip-html-unsafe

örneğin açısal 1.2.10 ve açısal-ui-bootstrap 0.11'e güncelleme: http://jsfiddle.net/aX2vR/1/

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

— chakming
kaynak

2

Açısal UI Bootstrap 0.13.X'te ipucu-html-güvensiz kullanımdan kaldırıldı. Artık html ile bir araç ipucu elde etmek için tooltip-html ve $ sce.trustAsHtml () yöntemini kullanmalısınız.

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

— soote
kaynak

0

Açısal Bootstrap için CSS çözümü:

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

Kullanımını kısıtlamanıza gerek yoksa bir üst öğe veya sınıf seçici kullanmaya gerek yoktur. Kopya / Makarna ve bu kural tüm alt bileşenler için geçerli olacaktır

— Antonis
kaynak