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

Question

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

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

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

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

好的：

错误：

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

因为我使用的是flot，所以我有 jQuery。生成div的sn-p是：

        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/

字符串长度会根据数据点是否 > 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,
    });
};