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尚未附加到body，则返回false，如果是，则返回true。 $（'＃tooltip'）将始终返回一个jQuery对象，因此它永远不会为false，但如果工具提示元素尚未添加到正文中，则其长度将为0，因此为false。

jsFiddle

问候。

从jQuery生成内容

1 个答案: