font - jquery ui tooltip 改行




新しい行をサポートするJQueryのツールチップ (5)

私はユーザーが要素の上を移動するとき、ツールチップを表示するための軽量jqueryプラグインを探しています。 私は、プラグインがタイトル属性からコンテンツを取得したいと思います。また、私は新しい行を作ることが重要です。

どんな助けもありがとう!



シンプルなカスタムjQuery拡張:

$.fn.extend({
  myToolTip: function() {
    this.hover(
      // mouse in ...
      function () { 
        var $this = $(this);
        if ($this.attr("title")) {
          $this.data("$tooltip", $("<div class='myToolTip'></div>")
            .text($this.attr("title"))
            .html(function(i, html) { return html.replace(/\n/g, "<br/>"); })
            .css({
              position: "absolute", 
              top: $this.position().top + $this.outerHeight(), 
              left: $this.position().left
            })
            .appendTo("body")
          );
        }
      },
      // mouse out ...
      function () {
        var $tooltip = $(this).data("$tooltip");
        if ($tooltip) $tooltip.remove();
      }
    );
  }
});

これにより、 <div class="myToolTip"> (スタイルを設定するためにCSSを使用)が作成され、 mouseenterの該当する要素の下に配置されますマウスを離すと 、ツールチップが再び削除されます。 要素のtitle改行は、 <div>の内容の中で<br>になります。他のすべてはそのまま表示されます。

$(".someElements").myToolTip();て拡張機能を呼び出し$(".someElements").myToolTip();


このコードはタイトルタグの中でbrを動作させます!

$(document).tooltip({
    content: function() {
        var element = $(this);
        return element.attr("title");
    }
});

jQuery 1.9(jquery + jquery-ui)と標準のtoolTip関数でこれを使用します:

$(".myClass").tooltip({
    content: function() {
        return $(this).attr('title');
    }
})

タイトルでは、HTMLの
または。

例:

<span class="myClass" title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>

この例を使用することができます:

$(document).ready(function(){

  $(function () {
    $('[data-toggle="tooltip"]').tooltip({
        container : 'body',
        html: true
    });
  });
});

HTMLタグ "
"タイトル内:

title=text1<br/>text2




tooltip