Question

我正在开发一个HTML网站。我有一些div，鼠标悬停，我需要一些弹出对话框。该对话框应该有一个箭头指向我鼠标所在的div。

我的问题是我不知道如何将弹出点指向想要的div，弹出窗口也应该出现在鼠标上方，除非鼠标下面没有空格。

我试图计算一些位置并决定弹出窗口应该在屏幕上显示的位置，但这很困难且令人困惑。对不起，如果这看起来像是“给我代码”问题，但事实并非如此，我只是在寻找提示正确显示div并让它指向div。任何第三方图书馆或提示都表示赞赏。

BTW我正在研究HTML5 + javascript + jquery

Answer 1

对于常规弹出式定位（工具提示需要position: absolute：

$('.elements').hover(function(e) {
    var tooltipX = e.pageX + 40;
    var tooltipY = e.pageY + 40;

    $('#tooltip').css({
        'left': tooltipX,
        'top': tooltipY
    });
    $('#tooltip').fadeIn('fast');
}, function(e) {
    $('#tooltip').fadeOut('fast');
});

对于箭头，您可以使用SVG或更好，Raphael.js http://raphaeljs.com/

弹出指向div并正确定位在屏幕内

1 个答案: