Twitter Bootstrap'ın İpucu ile karmaşık HTML kullanabilir miyim?

143

Resmi belgeleri kontrol edersem HTML adlı bir mülk görebilirim:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

"Araç ipucuna html ekle" diyor, ancak tür boole. Araç ipucu içinde karmaşık html'yi nasıl kullanabilirim?

— sergserg
kaynak

256

Bu parametre, araç ipucuna karmaşık html kullanıp kullanmayacağınızla ilgilidir. Bunu olarak ayarlayın trueve ardından html'yi titleetiketin özelliğine getirin.

Burada bu keman bakın - html özniteliğini etiketi data-html="true"içinde true olarak ayarladım <a>ve daha sonra örnek olarak html ad hoc'a ekledim.

— George Wilson
kaynak

3

Belgeleri bu alanda o kadar net değil. Bu yanıtı paylaştığınız için teşekkürler! :)

— sergserg

3

Bootstrap belgeleri kötü saçma :) Sevdiğim şeyleri temizleyebilir!

— George Wilson

6

Keman örneği benim için işe yaramıyor. Hala ham HTML kodunu görüyorum.

— Sonson123

3

Muhtemelen sizin gibi Bootstrap kodunda bazı değişiklikler. Tüm araç ipuçlarını işlev özniteliklerinde {html: true} kullanarak html başlıkları için kablolu hale getirmeden önce, ancak 2.2.2> 2.3.1'den başlayarak, öğelerime data-html = "true" eklemeliyim ve {html: true} bölümü. Keşke işleri ilk seferde daha sık düzeltmeye çalışırlar ve bültenler arasında sürekli değişikliklere engel olmazlar.

— Andrew Swihart

1

Buraya bakın: jsfiddle.net/44khF/148 . Ayrıca, yalnızca veri özniteliğiyle çalışıyor ve temsilciler kullanılıyorsa, başlatma sırasında html: true kullanmıyor gibi görünüyor.

— ptutt

34

Tıpkı normalde olduğu gibi data-original-title:

Html:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

JavaScript:

$("[rel=tooltip]").tooltip({html:true});

Html parametresi, araç ipucu metninin DOM öğelerine nasıl dönüştürüleceğini belirtir. Varsayılan olarak, XSS saldırılarını önlemek için araç ipuçlarında Html kodu kullanılır. Sitenizde bir kullanıcı adı görüntülediğinizi ve araç ipucunda küçük bir biyografi gösterdiğinizi varsayalım. Html kodu kaçmazsa ve kullanıcı biyografiyi kendileri düzenleyebilirse, kötü amaçlı kodlar enjekte edebilir.

— Matt Zeunert
kaynak

5

data-original-titletitlevarsa bootstrap geçici olarak saklanır . data-titleEğer bir unvanınız yoksa yeterlidir<a href="#" title="xxx">

— davidkonrad

harika ve basit

— Gayan

Merhaba @MattZeunert Ben kullandım ve gayet iyi çalışıyor ama ben sayfayı yeniden yüklemeden ve dinamik olarak ayarlamak olmadan ben gelecekteki verilerime göre başlığı güncellemek istiyorum, ben başlık içindeki içeriği değiştirmek demek.

— 3 kural

32

Veri başlığına html eklemekten kaçınmak için başka bir çözüm , araç ipucu html içeriği ile bağımsız div oluşturmak ve araç ipucunuzu oluştururken bu div'e başvurmaktır:

<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>

<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
    <h2>Tip title</h2>
    <p>This is my tip content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
            $(this).tooltip(
            {
                html: true,
                title: $('#' + $(this).data('tip')).html()
            });
        });
    });
</script>

Bu şekilde karmaşık okunabilir html içeriği oluşturabilir ve istediğiniz kadar araç ipucunu etkinleştirebilirsiniz.

burada demopen canlı demo

— migli
kaynak

Fantastik. Birinin HTML'yi doğrudan data özelliğine sıkıştırmayan bir çözüm önerdiğine sevindim.

— Mir

27

htmlVeri niteliği buna docs yapar yazdığını yapar. Bu küçük örneği deneyin, JavaScript gerekmez (açıklama için satırlara ayrılmıştır):

<span rel="tooltip" 
     data-toggle="tooltip" 
     data-html="true" 
     data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>

JSFiddle demoları:

— davidkonrad
kaynak

7

araç ipucuna html eklemek istiyorsanız "html" seçeneğini true olarak ayarlayın. Gerçek html seçeneği "title" seçeneğiyle belirlenir (bağlantının title özelliği ayarlanmamalıdır)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Canlı örnek

— Andriy F.
kaynak