Chart.js – disable tooltip when cursor moves outside the main canvas

I have a line chart and I set up my tooltip like this

options: {
        tooltips:{
            mode: 'x',
          intersect: false,
          callbacks: {
            footer: function(tooltipItem, data) {
              return 'some text'
            }
          }
        },    
    }

It works fine. The problem I have is that when I move my cursor to the x-axis ticks, which are outside the main plot/canvas, the tooltips stills appear. I’ve tried to set intersect: true but then the tooltip only shows up when I hover directly over the points. Ideally I want the tooltips to appear whenever I hover over the vertical gridlines (happens when intersect:false), but to not appear when my cursor moves outside of the main canvas. Is it possible?

Fiddle: https://jsfiddle.net/dqdqdq/yp47oL9t/47/

Answer

You can use the onHover callback in the options to check if the mouse is in the chartArea if so set the tooltip to enabled else disable the tooltip.

You might want to check also if the value you are setting is already the correct value since it will save a lot of unesesarry updates

Example (V2):

const updateTooltipShow = (chart, enabled) => {
  chart.options.tooltips.enabled = enabled;
  chart.update();
}

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {

  type: 'line',

  data: {
    labels: [1, 2, 3, 4],
    datasets: [{
        data: [1, 2, 3, 4],
        backgroundColor: "rgba(153,255,51,0.6)"
      },

    ]
  },
  options: {
    onHover: function(e, activeElements) {
      const {
        bottom,
        top,
        right,
        left
      } = this.chartArea;
      if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
        updateTooltipShow(this, true)
      } else {
        updateTooltipShow(this, false)
      }
    },
    tooltips: {
      mode: 'x',
      intersect: false,
      callbacks: {
        footer: function(tooltipItem, data) {
          return 'some text'
        }
      }
    },
  }

});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

Example (V3):

const updateTooltipShow = (chart, enabled) => {
  chart.options.plugins.tooltip.enabled = enabled;
  chart.update();
}

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {

  type: 'line',

  data: {
    labels: [1, 2, 3, 4],
    datasets: [{
        data: [1, 2, 3, 4],
        backgroundColor: "rgba(153,255,51,0.6)"
      },

    ]
  },
  options: {
    onHover: (e, activeElements, chart) => {
      const {
        bottom,
        top,
        right,
        left
      } = chart.chartArea;
      if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
        updateTooltipShow(chart, true)
      } else {
        updateTooltipShow(chart, false)
      }
    },
    plugins: {
      tooltip: {
        mode: 'x',
        intersect: false,
        callbacks: {
          footer: function(tooltipItem, data) {
            return 'some text'
          }
        }
      },
    }
  }
});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>