Twitter Bootstrap Tooltip ile karmaşık HTML kullanabilir miyim?

Question

Ben official documentation işaretlerseniz, bir özellik olarak adlandırılan HTML görebilirsiniz:

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. 

Diyor, "ipucu içine html eklemek", ama tip boolean. Bir Tooltip içindeki karmaşık html'yi nasıl kullanabilirim?

Answer 1

Bu parametre, karmaşık html'yi araç ipucuna kullanıp kullanmayacağınız ile ilgilidir. true'a ayarlayın ve ardından html'yi etiketin title özniteliğine getirin.

bu keman here bakın - Ben <a> etiketinde data-html="true" aracılığıyla gerçek html özelliğini ayarlamak ve sonra sadece bir örnek olarak html geçici de ekledik.

Answer 2

Sadece data-original-title kullanarak, normal şekilde:

Html:

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

JavaScript:

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

html parametre ipucu metin DOM öğeleri haline nasıl olması gerektiği belirtilir. Varsayılan olarak, XSS saldırılarını önlemek için araç ipuçlarına Html kodu kaçtı. Sitenizde bir kullanıcı adı gösterdiğinizi ve araç ipucunda küçük bir biyo göstereceğinizi varsayalım. Html kodu kaçmadıysa ve kullanıcı biyografiyi kendileri düzenleyebilirse zararlı kodları enjekte edebilirler. Araç ipucuna html almak istiyorsanız, "html" seçeneğini true olarak ayarlayın.

Answer 3

Gerçek html seçeneği "title" ile belirlenir (bağlantının title özelliği ayarlanmış edilmemelidir)

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

Live sample

Answer 4

html veri niteliği buna docs yapar yazdığını yapar. |>bootstrap 2.x -

<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: (açıklama çizgileri içine breaked) nessecary hiçbir JavaScript bu küçük örneği deneyin

<!-- 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> 

sen kompleksi oluşturmak Bu şekilde: sizin araç ipucu oluştururken bu div veri başlığında içine html ekleme önlemek için bootstrap 3.x

Answer 5

Başka bir çözüm ipucu html içeriği ile bağımsız div oluşturmak ve sevk etmektir okunabilir html içeriği ve istediğiniz kadar araç ipucu etkinleştirin. here on codepen