149

公式ドキュメントを確認すると、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 をツールチップに挿入」と書いてありますが、型は boolean です。ツールチップ内で複雑な html を使用するにはどうすればよいですか?

4

6 に答える 6

272

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

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

于 2012-12-04T14:43:08.547 に答える
41

data-titleへのhtml の挿入を回避する別の解決策は、tooltip html コンテンツを含む独立した div を作成し、 tooltip を作成するときにこの 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 のライブ デモ

于 2016-01-19T08:45:31.787 に答える
35

通常どおり、以下を使用し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コードがエスケープされておらず、ユーザーが自分でバイオを編集できる場合、悪意のあるコードを挿入する可能性があります。

于 2012-12-04T14:43:33.840 に答える
29

htmldata属性は、ドキュメントに記載されているとおりに機能します。この小さな例を試してみてください。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デモ：

于 2012-12-04T14:59:00.770 に答える
8

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

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

ライブサンプル

于 2012-12-04T14:50:07.313 に答える