javascript - "Tooltip"jQuery 插件中断

Question

我正在开发一个非常轻便的“工具提示”jQuery 插件。下面是代码:

(function( $ ) {
  $.fn.tooltip = function() {

    return this.each(function(){

        var target = $(this);

        target.on("mouseover", function(event){
            var tooltip = $(document.createElement("div"));
            tooltip
                .html(target.attr("tooltip-text"))
                .addClass("tooltip")
                .css({
                     "top" : event.pageY, 
                     "left":event.pageX 
                     })
                .fadeIn(300);                               
        }); 

    });

  };
})( jQuery );

我这样应用它:

<script>
    $("div.product").tooltip();
</script>   

想法是当用户将鼠标悬停在光标旁边的 DIV 上时显示工具提示。 但是，当我悬停这样的 DIV(类“产品”)时，脚本在 .addClass("tooltip") 行崩溃:

Uncaught TypeError: Object has no method 'addClass'

我做错了什么？

Answer 1

这是因为您正在分配属性 tooltip-text:

  .html(target.attr("tooltip-text"))

属性是未定义的，所以它搞砸了 jQuery 事件的链接。尝试这样做:

  .html(target.attr("tooltip-text") || "")

你也不需要在 window.onload 中执行，把它放在一个标准的 ready 文档中就可以了。