"Tooltip" jQuery插件中断

Question

我正在开发一个非常简单的"工具提示"jQuery插件。Bellow是代码：

(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（类"product"）上时，脚本在.addClass（"工具提示"）行崩溃：

未捕获类型错误：对象没有方法"addClass"

我做错了什么？

Answer 1

这是因为您正在分配属性工具提示文本：

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

该属性是未定义的，因此它会破坏jQuery事件的链接。尝试这样做：

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

您也不需要将执行粘贴在window.onload中，将其放在标准文档中即可。

Answer 2

不知道为什么，但使用

.attr（"style"，tooltip.attr（"style="）+"tooltip"）

而不是.addClass.

希望这能有所帮助。