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（类“产品”）悬停时，脚本会在 .addClass（“tooltip”）行崩溃：

未捕获的TypeError：对象没有方法'addClass'

我做错了什么？

Answer 1

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

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

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

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

您也不需要在window.onload中执行该操作，将其放入标准文档中就可以正常工作。

Answer 2

不知道为什么，但使用

.attr（“style”，tooltip.attr（“style”）+“tooltip”）

而不是.addClass。

希望这有帮助。

“工具提示”jQuery插件中断

2 个答案: