web-dev-qa-db-ja.com

JQuery UIツールチップはHTMLコンテンツをサポートしていません

今日、私はすべてのjQueryプラグインをjQuery 1.9.1にアップグレードしました。そして、jquery.ui.1.10.2でjQueryUIツールチップを使い始めました。すべてが良かった。しかし、コンテンツでHTMLタグを使用したとき（ツールチップを適用する要素のtitle属性で）、HTMLがサポートされていないことに気付きました。

これは私のツールチップのスクリーンショットです：

enter image description here

1.10.2でjQueryUIツールチップでHTMLコンテンツを機能させるにはどうすればよいですか？

jqueryhtmljquery-uijquery-ui-tooltip
82
user1372430

Edit：これは一般的な答えであることが判明したため、コメントに @ crush が記載されているという免責事項を追加しています未満。この回避策を使用する場合は、 XSSの脆弱性にさらされていることに注意してください 。このソリューションは、あなたが何をしているのかを知っている場合で、HTMLコンテンツの特定のである場合にのみ使用してください属性で。

これを行う最も簡単な方法は、デフォルトの動作をオーバーライドするcontentオプションに関数を提供することです。

$(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

例：http://jsfiddle.net/Aa5nK/12/

別のオプションは、contentオプションを変更する独自のツールチップウィジェットをオーバーライドすることです。

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

これで、.tooltipを呼び出すたびに、HTMLコンテンツが返されます。

例：http://jsfiddle.net/Aa5nK/14/

176
Andrew Whitaker

これの代わりに：

$(document).tooltip({
    content: function () {
        return $(this).prop('title');
    }
});

これを使用してパフォーマンスを向上させます

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});
16
Profesor08

とにかくタイトル属性が必要なので、私はカスタムデータタグでそれを解決しました。

$("[data-tooltip]").each(function(i, e) {
    var tag = $(e);
    if (tag.is("[title]") === false) {
        tag.attr("title", "");
    }
});

$(document).tooltip({
    items: "[data-tooltip]",
    content: function () {
        return $(this).attr("data-tooltip");
    }
});

このように、HTMLに準拠しており、ツールチップは必要なタグに対してのみ表示されます。

13
Chris

CSSスタイルを使用して、jQueryUIなしでこれを完全に実現することもできます。以下のスニペットを参照してください。

div#Tooltip_Text_container {
  max-width: 25em;
  height: auto;
  display: inline;
  position: relative;
}

div#Tooltip_Text_container a {
  text-decoration: none;
  color: black;
  cursor: default;
  font-weight: normal;
}

div#Tooltip_Text_container a span.tooltips {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;
  position: absolute;
  left: 10px;
  top: 18px;
  width: 30em;
  border: 1px solid #404040;
  padding: 0.2em 0.5em;
  cursor: default;
  line-height: 140%;
  font-size: 12px;
  font-family: 'Segoe UI';
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 7px 7px 5px -5px #666;
  -webkit-box-shadow: 7px 7px 5px -5px #666;
  box-shadow: 7px 7px 5px -5px #666;
  background: #E4E5F0  repeat-x;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

div#Tooltip_Text_container img {
  left: -10px;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}
<div id="Tooltip_Text_container">
  <span><b>Tooltip headline</b></span>
  <a href="#">
    <span class="tooltips">
        <b>This is&nbsp;</b> a tooltip<br/>
        <b>This is&nbsp;</b> another tooltip<br/>
    </span>
  </a>
  <br/>Move the mousepointer to the tooltip headline above. 
</div>

最初のスパンは表示されたテキスト用で、2番目のスパンは非表示テキスト用で、マウスオーバーすると表示されます。

4
Matt

Title属性にHTMLタグを配置しないようにするための別の解決策は、マークダウンを使用することです。たとえば、[br]を使用して改行を表し、コンテンツ関数で簡単な置換を実行できます。

タイトル属性：

"Sample Line 1[br][br]Sample Line 2"

コンテンツ関数：

content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}
2
Flareman2020

上記の@Andrew Whitakerの答えを拡張するには、ツールチップをtitleタグ内のhtmlエンティティに変換して、生のhtmlを属性に直接入れないようにします。

$('div').tooltip({
    content: function () {
        return $(this).prop('title');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="tooltip" title="&lt;div&gt;check out these kool &lt;i&gt;italics&lt;/i&gt; and this &lt;span style=&quot;color:red&quot;&gt;red text&lt;/span&gt;&lt;/div&gt;">Hover Here</div>

たいていの場合、ツールチップはとにかくphp変数に保存されるため、必要なのは以下だけです：

<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>
2
billynoah

JQuery（> v1.8）を使用している限り、$。parseHTML（）を使用して着信文字列を解析できます。

$('.tooltip').tooltip({
    content: function () {
        var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
        return tooltipContent;
    },
});

着信文字列の属性を解析して不快なものを探し、それをjQueryで読み取り可能なHTMLに変換します。この利点は、パーサーにヒットするまでに文字列が既に連結されているため、誰かがスクリプトタグを別々の文字列に分割しようとしても問題ではないことです。 jQueryのツールチップを使用して立ち往生している場合、これは確かなソリューションのようです。

1
ghettosoak

別の解決策は、titleタグ内のテキストを取得し、jQueryの.html()メソッドを使用してツールチップのコンテンツを作成することです。

$(function() {
  $(document).tooltip({
    position: {
      using: function(position, feedback) {
        $(this).css(position);
        var txt = $(this).text();
        $(this).html(txt);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });
});

例：http://jsfiddle.net/hamzeen/0qwxfgjo/

1
Hamzeen Hameem
$(function () {
         $.widget("ui.tooltip", $.ui.tooltip, {
             options: {
                 content: function () {
                     return $(this).prop('title');
                 }
             }
         });

         $('[rel=tooltip]').tooltip({
             position: {
                 my: "center bottom-20",
                 at: "center top",
                 using: function (position, feedback) {
                     $(this).css(position);
                     $("<div>")
                         .addClass("arrow")
                         .addClass(feedback.vertical)
                         .addClass(feedback.horizontal)
                         .appendTo(this);
                 }
             }
         });
     });

上記の投稿と解決策に感謝します。

コードを少し更新しました。これがあなたの助けになることを願っています。

http://jsfiddle.net/pragneshkaria/Qv6L2/49/

1
Pragnesh Karia

から http://bugs.jqueryui.com/ticket/9019

Title属性にHTMLを入れることは有効なHTMLではありません。XSSの脆弱性を防ぐためにエスケープしています（ ＃8861 を参照）。

ツールチップにHTMLが必要な場合は、コンテンツオプション- http://api.jqueryui.com/tooltip/#option-content を使用します。

JavaScriptを使用してHTMLツールチップを設定してみてください。以下を参照してください

$( ".selector" ).tooltip({
   content: "Here is your HTML"
});
1
Hắc Huyền Minh

ソースコード 'jquery-ui.js'を変更し、ターゲット要素のタイトル属性コンテンツを取得するためのこのデフォルト関数を見つけることができます。

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

に変更する

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        if($(this).attr('ignoreHtml')==='false'){
            return $(this).prop("title");
        }
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

したがって、html tipsを表示したいときはいつでも、ターゲットhtml要素に属性ignoreHtml = 'false'を追加するだけです。このような<td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

1
Joker

HTMLマークアップ

クラス「.why」のツールヒントコントロール、およびクラス「.customTolltip」のツールヒントコンテンツ領域

$(function () {
                $('.why').attr('title', function () {
                    return $(this).next('.customTolltip').remove().html();
                });
                $(document).tooltip();
            });
0
Super Model