0

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

我的问题是我不知道如何将弹出窗口指向想要的 div，而且弹出窗口应该出现在鼠标上方，除非屏幕上没有空间它出现在鼠标下方。

我试图计算一些位置并决定弹出窗口应该在屏幕中的哪个位置，但这很难且令人困惑。抱歉，如果这看起来像是一个“给我代码”的问题，但事实并非如此，我只是在寻找正确显示 div 并将其指向 div 的提示。感谢任何第三方库或提示。

顺便说一句，我正在研究 HTML5 + javascript + jquery

4

1 回答 1

0

对于一般弹出定位（工具提示将需要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/

于 2013-04-30T23:43:54.507 回答