web-dev-qa-db-ja.com

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を使用するにはどうすればよいですか？

javascripthtmltwitter-bootstrap-3tooltip
134
sergserg

このパラメーターは、複雑なhtmlをツールチップに使用するかどうかに関するものです。 trueに設定してから、htmlをタグのtitle属性に入力します。

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

239
George Wilson

通常どおり、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要素に変換する方法を指定します。デフォルトでは、XSS攻撃を防ぐために、ツールチップでHtmlコードがエスケープされます。サイトにユーザー名を表示し、ツールチップに小さな略歴を表示するとします。 htmlコードがエスケープされておらず、ユーザーが自分でbioを編集できる場合、悪意のあるコードを挿入する可能性があります。

34
Matt Zeunert

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

26
migli

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

25
davidkonrad

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

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

ライブサンプル

7
Andriy F.