Creating single tooltip for multiple elements

Question

I have created a bubble chart using d3js and have added Extjs tooltip to it. In doing so, I have created separate tooltip for each of the circles in the bubble chart. There is a noticeable delay in display of the tooltip when I move the mouse pointer from 1 circle to the other. So I want to have a single tooltip for all the circles.

Can someone tell me how to use delegate: '.x-form-field-wrap' to create a single tooltip.

Here is the fiddle.

Answer 1

There is no need for creating multiple tool-tips. Create a single tooltip and just update it's position on mouseover and 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]);
});

Updated fiddle