为多个元素创建单个工具提示

Question

我使用 d3js 创建了一个气泡图并向其添加了 Extjs 工具提示。为此，我为气泡图中的每个圆圈创建了单独的工具提示。当我将鼠标指针从一个圆圈移动到另一个圆圈时，工具提示的显示有明显的延迟。所以我想为所有圈子提供一个工具提示。

谁能告诉我如何使用 delegate: '.x-form-field-wrap' 创建单个工具提示。

这里是 fiddle.

Answer 1

这道题是xy problem的经典例子。

您可以在一行中解决您的问题，即在工具提示上设置 showDelay:0。

Answer 2

无需创建多个工具提示。创建一个工具提示并仅在鼠标悬停和鼠标移动时更新它的位置。

var tip = Ext.create('Ext.tip.ToolTip',{
    title: 'test',
    width: 150,
    height: 40,
    radius:5,
    hidden: true,    
    anchor: 'left',
    autoHide: false,
    trackMouse: true,
    anchorToTarget: false
});

circle.on('mouseover',function(d,i){   
    tip.setTitle("radius: "+d.radius);    
    tip.showAt([d3.event.x,d3.event.y]);
}).on('mousemove',function(d,i){
   tip.setTitle("radius: "+d.radius);
    tip.showAt([d3.event.x,d3.event.y]);
});

已更新fiddle

Answer 3

您需要计算 X 和 Y 坐标并在鼠标悬停事件上显示一个 div。您可以使用以下 fiddle 代码执行此操作：

我认为这个解决方案比 extjs 更好。

var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", function (d) {
return d.radius;})
.style("fill", function (d, i) {
return "green";}).on("mouseover", function (d, i) { 
tDiv.html("Radius :" + d.radius + "</br>Name:" + data.children[i].name + "</br>Size:" + data.children[i].size);
tDiv.style("left", ((d3.event.pageX) - $(tDiv[0]).width() - 10) + "px").style("top", (d3.event.pageY - 0) + "px");   }).on("mouseleave", function (d, i) {
tDiv.style("display", "none");})
.call(drag);

可以参考this fiddle code

为多个元素创建单个工具提示

Creating single tooltip for multiple elements

extjs

d3.js

tooltip

bubble-chart