我正在使用一些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-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,
});
};