子元素（圖像的工具提示）被剪切到具有固定寬度和隱藏溢出的父div內

Question

我有一個固定寬度的父div，其中隱藏了溢出。 父div有幾個圖像，我可以使用自定義Javascript滾動這些圖像。 對於每個圖像，我都有一個工具提示，當我將鼠標懸停在圖像上時要顯示該提示。 工具提示很大，當我將鼠標懸停在圖像上時，提示會被剪切，因為父div已隱藏。 解決此問題的最佳方法是什么。 我一直到處逛逛，還沒有找到一個可行的解決方案。

任何幫助都非常感謝。 謝謝

Answer 1

我建議您，工具提示元素將是BODY的子元素，因此不會被裁剪。 為了將工具提示顯示在相對於圖像的位置，您將必須知道圖像相對於身體的位置。 這是我使用的一種方法：

function getPosition(element)
{
var position = {x:-1, y:-1};

// no element //
if (element === null) return position;

// getting offset parent
var offsetParentNode = document.body; 

// calculating position //
position.x = 0;
position.y = 0;
var _parent = element;
while (_parent !== offsetParentNode && _parent !== document.body && _parent !== null)
{
    position.x += _parent.offsetLeft;   
    position.x -= _parent.scrollLeft;
    position.y += _parent.offsetTop;    
    position.y -= _parent.scrollTop;
    _parent = _parent.offsetParent;
}

if (offsetParentNode !== document.body && (_parent === document.body || _parent === null))
{
    position.x = -1;
    position.y = -1;
}

return position;
}