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.

score 1 · Answer 1 · edited Mar 20 '17 at 10:29

1

This question is a classic example of the xy problem.

You can solve your problem in a single line, namely by setting showDelay:0 on the tooltips.

edited Mar 20 '17 at 10:29

Community

1
1

answered Nov 16 '15 at 12:09

Alexander

19,906
19
75
162

Gilsha · Accepted Answer · 2015-11-16T13:01:06.427

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

edited Nov 16 '15 at 13:01

answered Nov 16 '15 at 12:49

Gilsha

14,431
3
32
47

thanks. But I dont want to use mouseOver and mouseMove of d3. My issue got resolved by ading showDelay:0 to the tooltip – salsa111 Nov 17 '15 at 06:44

Nilesh Wagh · Answer 3 · 2015-11-16T13:05:23.883

You need to calculate X and Y coordinate and show one div on mouseover event. you can do this using below fiddle code:

I think this solution is better than 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);

You can refer this fiddle code

Creating single tooltip for multiple elements

3 Answers3