Question

我需要弄清楚一些允许div显示为工具提示的JQuery代码，我不想使用JQuery UI中的任何插件。

要求是：

div应该跟随光标
当光标悬停在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
});

FIDDLE （参考：mkyong）

将div显示为工具提示

1 个答案: