根據寬度調整絕對div的位置

因此，我一直在嘗試將flot整合到我們的一些標準報告中。我查看了一些flot示例，並根據我們生成報告的一些數據拼湊了一些生成flot圖的代碼。根據寬度調整絕對div的位置

從一個flot例子中，我發現你可以通過一些JavaScript在圖上顯示工具提示。它效果很好。我的一個問題，我似乎無法解決，與工具提示。偶爾，當工具提示位於圖形的最右側時，它會渲染頁面的一側，從而渲染頁面。

這是有問題的，因爲爲了清楚地讀取該點的工具提示，您必須將頁面向右滾動，同時將鼠標保持在相關數據片上。爲了解決這個問題，我試圖在光標經過繪圖區域的左半部分時將工具提示顯示在光標的左側。但是，迄今爲止，我只能成功地確定光標何時通過屏幕的左半部分，並且我嘗試重新定位div並沒有結果。

相關代碼：

function showTooltip(x, y, msg) { 
    flot_tooltip = $("<div id = 'flot_tooltip'>" + msg + '</div>').css({ 
     position: 'absolute', 
     display: 'none', 
     top: y + 5, 
     left: x + 5, 
     border: '1px solid #000', 
     background: '#eee', 
     padding: '2px', 
     opacity: '0.75' 
    }).appendTo('body').fadeIn(150) 
    adjustForX(flot_tooltip) 
} 

function adjustForX(flot_tooltip){ 
    if ($(flot_tooltip).offset().left > window.innerWidth/2) { 
     //alert($(flot_tooltip).width()) 
     //next need to adjust the left position of the element 
    } 
}

完全Fiddle

對不起，囉嗦的解釋，任何指導，將不勝感激。

來源

2014-04-10 user3334690

我有我的網頁上的一個同樣的問題，與此代碼解決了這個問題：

function showTooltip(x, y, contents) { 
    var params = { 
     position: 'absolute', 
     display: 'none', 
     border: '2px solid #333333', 
     'border-radius': '3px', 
     padding: '3px', 
     size: '10', 
     'background-color': 'lightyellow', 
     opacity: 0.90 
    }; 
    if (x < 0.8 * $(window).width()) { 
     params.left = x + 20; 
    } 
    else { 
     params.right = $(window).width() - x + 20; 
    } 
    if (y < 0.8 * $(window).height()) { 
     params.top = y + 5; 
    } 
    else { 
     params.bottom = $(window).height() - y + 10; 
    } 
    $('<div id="tooltip">' + contents + '</div>').css(params).appendTo('body').fadeIn(200); 
}

在這裏，我的x和y位置值與窗口的大小和工具提示定位到的左鼠標位置如果鼠標位置靠近右邊界，並且位於鼠標位置靠近底部的位置。

來源

2014-04-11 12:05:20 Raidri

這完全回答了我的問題，儘管在rails代碼中做了類似的事情，但我並沒有想到將params作爲哈希值。 – user3334690

根據寬度調整絕對div的位置

回答

相關問題