Extjs 为多个图元创建单个工具提示

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

有人能告诉我如何使用

委托：'.x-form-field-wrap'

创建单个工具提示吗

---

这是一个问题。

这个问题是一个典型的例子

---

您可以在一行中解决问题，即通过设置工具提示。

无需创建多个工具提示。创建一个工具提示，只需更新它在mouseover和mousemove上的位置

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]);
});

---

更新了

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

我认为这个解决方案比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);

var circle=svg.selectAll（“circle”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“r”，函数（d）{
返回d.radius；}）
.样式（“填充”，功能（d，i）{
返回“绿色”；}）
tDiv.html（“半径：+d.Radius+”
Name:“+data.children[i].Name+”
Size:“+data.children[i].Size”）；
tDiv.style（“左”（（d3.event.pageX）-$（tDiv[0]）.width（）-10）+“px”）.style（“顶”（（d3.event.pageY-0）+“px”）；）on（“mouseleave”，函数（d，i）{
tDiv.style（“显示”、“无”）；}）
.呼叫（拖动）；

---

您可以参考

谢谢。但是我不想用d3的mouseOver和mouseMove。我的问题通过将showDelay:0添加到工具提示中得到解决