I have generated a bar graph using dimple.js and my bar graph is a stacked bar with two series. I need a customized tooltip while hovering on the bar graph and i am able to get the tooltip while hovering on the bar graph. when I hover on one series(one stack of the bar) the tooltip appears and when i leave the bar the tooltip disappears properly but if I hover on one series and directly moves to the other series(another stack of the bar graph) the tooltip is stuck and while leaving the bar the tooltip is not disappearing. Please help me on this.
var yMax = 520; // overriding y axis
var popup;
var score=8000/100;
var svg = dimple.newSvg("#chartContainer", 600, 600);
var data = [{
"Brand":"A",
"Day":"Mon",
"SalesVolume":100 },
{
"Brand":"B",
"Day":"Mon",
"SalesVolume":200 }];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(100, 50, 300, 300)
var x = myChart.addCategoryAxis("x", "Day");
var y = myChart.addMeasureAxis("y", "SalesVolume");
y.overrideMax = yMax;
y.addOrderRule("SalesVolume");
var s = myChart.addSeries("Brand", dimple.plot.bar);
s.barGap=0.7;
myChart.addLegend(120, 400, 300, 30, "left");
s.addEventHandler("mouseover", onHover);
s.addEventHandler("mouseleave", onLeave);
myChart.draw();
//d3.selectAll("rect").on("mouseover", null);
var defs = svg.append("g");
defs.append("marker")
.attr("id", "triangle-start")
.attr("viewBox", "-5 -5 10 10")
.attr("refX", -1)
.attr("refY", 0)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.attr("class", "marker")
.attr("d", "M 0 0 L 3 4 L 3 -4 z");
svg.append("line")
.attr("x1",205)
.attr("x2", 295)
.attr("y1", (y._scale(score)))
.attr("y2",(y._scale(score)))
.attr('stroke','black')
.attr("marker-end", "url(#triangle-start)")
.style("stroke-dasharray", "3");
var defs1 = svg.append("g");
defs1.append("marker")
.attr("id", "triangle-start1")
.attr("viewBox", "-5 -5 10 10")
.attr("refX", -1)
.attr("refY", 0)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.attr("class", "marker")
.attr("d", "M 0 0 L 3 4 L 3 -4 z");
svg.append("line")
.attr("x1",205)
.attr("x2", 295)
.attr("y1",200)
.attr("y2",200)
.attr('stroke','black')
.attr("marker-start", "url(#triangle-start1)")
.style("stroke-dasharray", "3");
function onHover(e) {
console.log("on enter");
var cx = parseFloat(e.selectedShape.attr("x")),
cy = parseFloat(e.selectedShape.attr("y"));
// Set the size and position of the popup
var width = 150,
height = 70,
x = (cx + width + 10 < svg.attr("width") ?
cx + 10 :
cx - width - 20);
y = (cy - height / 2 < 0 ?
15 :
cy - height / 2);
// Create a group for the popup objects
popup = svg.append("g");
// Add a rectangle surrounding the text
popup .append("rect")
.attr("x", x + 5)
.attr("y", y - 5)
.attr("width", 150)
.attr("height", height)
.attr("rx", 5)
.attr("ry", 5)
.style("fill", 'white')
.style("stroke", 'black')
.style("stroke-width", 2);
// Add multiple lines of text
}
function onLeave(e) {
console.log("on Leave");
if (popup !== null) {
popup.remove();
}
}
http://jsfiddle.net/keshav_1007/f4warsnu/4/ - here is my fiddle
I think there has been a change to certain browsers. Your fiddle works ok for me but I've seen the behaviour you describe before. You could try playing with different events I think "mouseenter" and "mouseout" might work more consistently.