How to show only one tool tip at a time

Question

I am using canvas js. I am having pie chart and doughnut chart. There is a bit of problem in using tool tip. If I hover over doughnut chart and then pie chart I can see the tool tip of both the charts. Like this

-

And here is link of jsfiddle

The code is pretty much simple - HTML

<div id="parent">
  <div id="doughnutContainer" uniqueID ='doughnut'></div>
  <div id="pieContainer" uniqueID ='pie'></div>
</div>

Creating charts with data -

var chart1 = new CanvasJS.Chart("doughnutContainer",
{        
    data: [
    {
        type: "doughnut",
        dataPoints: [
            { y: 71 },
            { y: 55 },
            { y: 50 },
            { y: 65 },
            { y: 95 },
            { y: 68 },
            { y: 28 },
            { y: 34 },
            { y: 14 }
        ]
    },

    ]
});
var chart2 = new CanvasJS.Chart("pieContainer",
{        
    backgroundColor: "transparent",
    data: [
    {
        type: "pie",
        dataPoints: [
            { y: 71 },
            { y: 55 },
            { y: 50 },
            { y: 65 },
            { y: 95 },
            { y: 68 },
            { y: 28 },
            { y: 34 },
            { y: 14 }
        ]
    }
    ]
});

chart1.render();
chart2.render();

Can anyone help me sort this issue out. Thank you

Answer 1

You can do a simple JQuery trick by hiding tooltip of a chart when hovering on another one.

something like:

$("#pieContainer").hover(function(){
        $("#doughnutContainer .canvasjs-chart-tooltip").hide();
    }
);

Updated jsFiddle