弹出窗口指向一个div并正确定位在屏幕内

我正在HTML网站上工作。我有一些div，在鼠标悬停时，我需要有某种弹出式对话框。该对话框应该有一个箭头指向我有鼠标的div。弹出窗口指向一个div并正确定位在屏幕内

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

我试图计算一些位置，并决定弹出窗口应该在屏幕上显示，但它很难和令人困惑。对不起，如果这看起来像一个“给我代码”的问题，但它不是，我只是寻找提示，以正确显示div并指向div。任何第三方库或技巧值得赞赏。

顺便说一句，我对HTML5 +工作的JavaScript + jQuery的

2013-04-30 Youssef

尽管你的确描述了你的问题，但是我们非常感谢能够看到一些代码，考虑添加一些代码以便你的问题具有更高的价值 – 2013-05-01 00:02:45

对于一般的弹出定位（提示需要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或更好，但拉斐尔。 js at http://raphaeljs.com/

来源

2013-04-30 23:43:54

弹出窗口指向一个div并正确定位在屏幕内

回答

相关问题