我正在使用一些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的位置,但是我什至不知道在哪里寻找这种方法在这里。

自从我从事任何形式的Web编程已经有好几年了,所以我可能会遗漏一些明显的东西。



更多编辑:更好的图片:

div的定位方式。
  

我希望如何定位它。


(尺寸是胡说八道,忽略它们)



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

字符串长度根据数据点是否大于0而变化。请尝试将鼠标悬停在图表的上部和下部以查看问题。

最佳答案

您使用的是静态值(y-30x-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,
    });
};

07-24 09:47
查看更多