Hide Tooltip on MouseOut - CanvasJS JavaScript Charts

Hide Tooltip on MouseOut - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Hide Tooltip on Mouse Out"
      },
      toolTip:{
        enabled: true
      },
      data: [
      {  
       	mouseover: onMouseover,
        mouseout: onMouseout,
        type: "line",        
        dataPoints: [
        { x: 10, y: 71, label: "alpha"},
        { x: 20, y: 55, label: "bravo"},
        { x: 30, y: 50, label: "charlie"},
        { x: 40, y: 65, label: "delta"},
        { x: 50, y: 95, label: "echo"},
        { x: 60, y: 68, label: "fox"},
        { x: 70, y: 28, label: "golf"},
        { x: 80, y: 34, label: "hotel"},
        { x: 90, y: 14, label: "india"}
        ]
      }
      ]
    });

    chart.render();
    
    function onMouseout(e){ 
     	chart.options.toolTip.enabled = false;
      chart.render();
      // document.getElementsByClassName('canvasjs-chart-tooltip')[0].style.display= 'none'; // uncomment this line to hide toolTip on mouseout
    }
    
    function onMouseover(e){
    	 // document.getElementsByClassName('canvasjs-chart-tooltip')[0].style.display= 'block'; // uncomment this line to show the hidden toolTip on mouseover
       chart.options.toolTip.enabled = true;    
       chart.render();
    }