子元素（图像的工具提示）被剪辑在具有固定宽度和隐藏溢出的父div内

Question

我有一个固定宽度的父 div，并且隐藏了溢出。父 div 有几个图像，我使用自定义 Javascript 滚动这些图像。对于每个图像，我都有一个工具提示，当我将鼠标悬停在图像上时我想显示该工具提示。工具提示很大，当我将鼠标悬停在图像上时，工具提示会被剪切，因为父 div 已隐藏溢出。这个问题的最佳解决方案是什么。我已经四处寻找了很多，但没有找到一个可行的解决方案。

非常感谢任何帮助。谢谢

Answer 1

我建议您工具提示元素将是 BODY 的子元素，因此它们不会被剪切。 为了在相对于图像的位置显示工具提示，您必须知道图像相对于 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;
}

Answer 2

我也有同样的问题。通过在包含具有工具提示的元素的 div 中添加

data-container="body"

属性解决了这个问题。

<a data-toggle="tooltip" data-container="body" data-original-title="Inactive">Inactive <i class="fa fa-key disable"></i></a>