0

我创建了一个 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 回答