从 jQuery 生成内容

Question

我正在开发一个供个人使用的 jQuery 工具提示模块。在我的代码中，我使用 jQuery 的 mousemove 和 mouseout 函数来生成工具提示。但是，当我将鼠标移到该元素上时，它会点击构建函数中的 if 语句并表示工具提示应该在那里，即使我可以在 Firebug 和 Chrome 开发工具中看到它是不是。

$.fn.tooltip = function(userOptions)
{
    var defaultOptions =    {
                                position: '',
                                follow: true
                            };

    var options = $.extend(defaultOptions, userOptions);

    $(this).mouseenter(function()
    {
        var title = $(this).data('title');

        build(title, options.position, options.follow);

        var top, left;

        var tooltip = $('#tooltip');

        if (tooltip.hasClass('top'))
        {
            top = $(this).offset().top - ($(this).height() * 2) - 10;
            left = $(this).offset().left;
        }

        else if (tooltip.hasClass('right'))
        {
            top = $(this).offset().top - ($(this).height() / 2);
            left = $(this).offset().left + tooltip.width(); 
        }

        else if (tooltip.hasClass('bottom'))
        {
            top = $(this).offset().top + $(this).height() + 10;
            left = $(this).offset().left;
        }

        else if (tooltip.hasClass('left'))
        {
            top = $(this).offset().top - ($(this).height() / 2);
            left = $(this).offset().left - (tooltip.width() * 1.5);
        }

        tooltip.css('top', top).css('left', left).show();

    });

    $(this).mousemove(function(e)
    {
        if (options.position === "" || options.position === undefined || options.follow === true)
        {
            var title = $(this).data('title');

            build(title, options.position, options.follow);

            var top = e.pageY + 25;
            var left = e.pageX + 10;

            $('#tooltip').css('top', top).css('left', left).show();
        }
    });

    $(this).mouseout(function()
    {
        $('#tooltip').hide();
    });

    function build(title, position, follow)
    {
        if ($('#tooltip'))
        {
            console.log("The tooltiop should be on the page.");
            $('#tooltip-content > p').text = title;
        }

        else
        {
            console.log("Position is: " + position);

            var markup  = '<div id="tooltip" class=' + position + '">';
                markup += '<div id="tooltip-content">';
                markup += '<p>' + title + '</p>';
                markup += '<span id="tooltip-arrow"></span>';
                markup += '</div>';
                markup += '</div>';

            $('body').append(markup);
        }
    }
};

最初的目标是在用户第一次移到元素上时创建工具提示，然后当鼠标移开时我想隐藏工具提示并将其移开直到再次需要它。这就是为什么我要检查它是否存在于构建函数中。我知道我忽略了一些东西，我只是不知道它是什么。有什么建议吗？

Answer 1

在构建函数中更改 if 中的检查，例如：

if ($('#tooltip').lenght) {

如果#tooltip 尚未附加到正文，则 return 为 false，如果已附加，则为 true。 $('#tooltip') 将 return 始终是一个 jQuery 对象，因此它永远不会为假，但它的长度将为 0，因此如果工具提示元素尚未添加到主体中，则为假。

jsFiddle

此致。

从 jQuery 生成内容

Generating content from jQuery

javascript

jquery

module