Twitter Bootstrapのツールチップで複雑なHTMLを使用できますか？

公式ドキュメントを確認すると、HTMLというプロパティが表示されます。

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.

「ツールチップにhtmlを挿入する」とありますが、タイプはブール値です。ツールチップ内で複雑なHTMLを使用するにはどうすればよいですか？

このパラメーターは、ツールチップに複雑なhtmlを使用するかどうかについてのみです。に設定して、タグの属性にtruehtmlをヒットしtitleます。

ここでこのフィドルを参照してください- タグdata-html="true"でhtml属性をtrueに設定<a>し、例としてhtmlアドホックに追加しました。

通常どおり、次を使用しdata-original-titleます：

HTML：

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

JavaScript：

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

htmlパラメータは、ツールチップテキストをDOM要素に変換する方法を指定します。デフォルトでは、HTMLコードはツールチップでエスケープされ、XSS攻撃を防ぎます。サイトにユーザー名を表示し、ツールチップに小さな略歴を表示するとします。HTMLコードがエスケープされておらず、ユーザーが自分で略歴を編集できる場合、悪意のあるコードを挿入する可能性があります。

htmlをdata-titleに挿入しない別の解決策は、ツールチップのhtmlコンテンツを含む独立したdivを作成し、ツールチップを作成するときにこのdivを参照することです。

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

このようにして、読み取り可能な複雑なhtmlコンテンツを作成し、必要な数のツールチップをアクティブ化できます。

codepenのライブデモ

htmlデータ属性は、それがドキュメントにないと言うまさにません。この小さな例を試してください。JavaScriptは必要ありません（説明のために行に分けています）。

<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デモ：

• ブートストラップ2.x
• ブートストラップ3.x

ツールチップにHTMLを含める場合は、「html」オプションをtrueに設定します。実際のHTMLはオプション「タイトル」によって決定されます（リンクのタイトル属性は設定しないでください）

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

ライブサンプル