jquery - 将 div 显示为提示

Question

我需要找出一些让 div 显示为工具提示的 JQuery 代码，并且我不想使用 JQuery UI 中的任何插件。

要求是：

1. 那个 div 应该跟随光标
2. 当光标悬停在 div 上时，“tootip”应该保持可见。

我只需要如何做的基本想法。我已成功将 div 显示为工具提示，但当光标从锚标记中移出时它会消失：

<script type="text/javascript">
    function pageLoad() {

        var mouseX;
        var mouseY;
        $(document).mousemove(function(e) {
            mouseX = e.pageX;
            mouseY = e.pageY;
        });

        jQuery('.trigger').mouseenter(function() {



            var width = parseInt(jQuery('#pop-up').css('width'), 10);

            jQuery('#pop-up').css('top', mouseY);
            jQuery('#pop-up').css('left', mouseX - width);
            jQuery('#pop-up').fadeIn(500);


        }).mouseleave(function() {
            jQuery('#pop-up').fadeOut();
        });

    }
</script>

Answer 1

尝试这个：

var changeTooltipPosition = function (event) {
    var tooltipX = event.pageX - 8;
    var tooltipY = event.pageY + 8;
    $('div.tooltip').css({
        top: tooltipY,
        left: tooltipX
    });
};

var showTooltip = function (event) {
    $('div.tooltip').remove();
    $('<div class="tooltip">Div should follow the cursor! :)</div>')
        .appendTo('body');
    changeTooltipPosition(event);
};

var hideTooltip = function () {
    $('div.tooltip').remove();
};

$("span#hint,label#username").bind({
    mousemove: changeTooltipPosition,
    mouseenter: showTooltip,
    mouseleave: hideTooltip
});

小提琴（参考：mkyong）