位置<div>相对于div信封的右下角</div>

Question

我正在使用一些js绘图库（flot，具体而言），并尝试添加鼠标悬停工具提示以显示鼠标指向的绘制数据的值。

现在，我有一个事件调用一个显示工具提示的函数。该事件将鼠标指针位置设置为x, y坐标。

由于大多数鼠标指针指向左侧，我想将工具提示<div>放在x, y的左侧。但是，div的内容是动态的，据我所知，没有办法指定div位于div整体大小的右下方范围内。

现在，我的所有间距都是硬编码的，并且不能很好地处理长内容：

○：

为：

_{圆圈是当前鼠标悬停的数据点。这是我有}

的坐标

因为我正在使用flot，所以我有jQuery。生成div的代码段为：

        function showTooltip(x, y, contents, z) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 30,
                left: x - 80,
                'font-weight':'bold',
                border: '1px solid rgb(255, 221, 221)',
                padding: '2px',
                'background-color': z,
                opacity: '0.8'
            }).appendTo("body").show();
        };

我没有太多运气寻找答案，因为谷歌搜索“div position relative”给出了很多结果来定位div相对于彼此，而没有关于它们相对于它们的范围定位。

如果我使用更传统的UI工具包绘制它，我会调用div的getExtents()函数，并使用返回的维度将偏移应用于div的位置，但我不知道哪里甚至可以在这里寻找那种方法。

自从我处理任何类型的网络编程以来，这也是多年，所以我可能会遗漏一些明显的东西。

---

更多编辑：更好的图片：

如何定位div。

我希望如何定位它。

（维度是废话，忽略它们）

---

编辑：JSFiddle演示：http://jsfiddle.net/9x7aJ/2694/

字符串长度的变化取决于数据点是否为＆gt; 0.尝试将鼠标悬停在图表的上部和下部以查看问题。

Answer 1

您使用的是静态值（y-30和x-80），因此较大的contents将重叠（右侧）。尝试一些动态定位

working fiddle

function showTooltip(x, y, contents, z) {
    var offset = 10; // use higher values for a little spacing between `x,y` and tooltip
    // first create tag in DOM
    var elem = $('<div id="tooltip">' + contents + '</div>').appendTo("body").show();

    elem.css({ //style it
        position: 'absolute',
        display: 'inline-block',
        'font-weight':'bold',
        border: '1px solid rgb(255, 221, 221)',
        padding: '2px',
        'background-color': z,
        opacity: '0.8'
    });
    // border, padding have to be applied first, than setting position:
    elem.css({ 
        top: y - elem.height() - offset, // $(this). also possible, but no $.-call needed, because jQ-Object in 'elem' already exists
        left: x - elem.width() - offset,
    });
};