彈出窗口指向一個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並正確定位在屏幕內

回答

相關問題