1. ホーム
  2. jquery

[解決済み] Jquery UI tooltipはhtmlコンテンツをサポートしない

2023-04-16 22:30:57

質問

今日、jQueryのプラグインを全てjQuery 1.9.1にアップグレードしました。そして、私は jquery.ui.1.10.2 で jQueryUI tooltip を使用し始めました。すべて順調だった。しかし、コンテンツにHTMLタグを使用したとき( title 属性で)、HTMLがサポートされていないことに気づきました。

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

1.10.2でjQueryUI tooltipでHTMLコンテンツを動作させるにはどうすればよいですか?

どのように解決するのですか?

編集 : これは人気のある答えであることが判明したので、私は以下の免責事項を追加します。 クラッシュ がコメントで述べている免責事項を追加します。このワークアラウンドを使用する場合 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/