0

2 つの方法で使用できる JQuery ツールチップ プラグインを作成しました。

  • ツールチップの内容は、HTML アンカーのタイトルです。

  • ツールチップの内容はオプションとして渡されます。

別のオプションが欲しいです：

  • ツールチップ マークアップ全体がページ内の要素になります。

    私が探しているものの例を挙げましょう：

    $("table td.Task a.Menu", "li div.Menu").Tooltip();

    そのため、「table td.Task」の下のすべてのリンク メニューでツールチップが表示されます。

    ツールチップ マークアップは、a.Menu の同じ LI の下にある div.Menu になります。

これもできるようにプラグインを変更するにはどうすればよいですか? 私の現在のコードは次のとおりです。

(function ($) {

  $.fn.Tooltip = function (options) {

    var defaults = {
      content: "",
      class: "Tooltip",
      id: "Tooltip"
    };

    var options = $.extend({}, defaults, options);

    var tooltip;

    $(this).each(function () {

      var title = $(this).attr("title");
      if (title == undefined && options.content == "") return;

      $(this).mouseenter(function (e) {

        $(this).removeAttr("title")
        tooltip = "<div id='{id}' class='{class}'>{content}</div>"

        var content = options.content == "" ? title : options.content;
        tooltip = tootip.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", content);

        $("body").append(tooltip);
        $("#" + options.id).fadeIn("fast");

      }), // Mouse Enter

      // Mouse Leave, Mouse Down and Mouse Move functions ...

    }
   }

ありがとう！

4

1 に答える 1

1

プラグイン全体を書き直すつもりはありませんが、ページからコンテンツを返すオプションを追加できます:

var defaults = {
      content: "",
      class: "Tooltip",
      id: "Tooltip",
      contentSource: 'title' /* "title" as default or "html" for in page*/
      htmlSource: function($el){
         /* write whatever traverse returns content wanted*/
         return  $el.siblings('div.foo').html();
      }
    };

コンテンツを設定するときに、どのソースを確認するか

/* should cache $(this) since using it numerous times*/
var $this=$(this)


var content;
if( options.contentSource !='title'){
   content=options.htmlSource($this);
}else{
  content= /* existing code*/
}

用途:

$("table td.Task a.Menu", "li div.Menu").Tooltip({
      contentSource: 'html',
      htmlSource: function($el){            
          return  $el.parent().find('.someClass').html();
      }
});
于 2013-04-08T14:16:40.617 に答える