How to detect when Tooltip closes in chart.js?

Question

I'm using chart.js for a web project and it's working pretty fine. However, I do have one question. I'm trying to connect a line graph with n data points to a list of n html divs. When the user hovers over data point 2, div 2 will be highlighted and a function is called. That does work. However, when the user unhovers data point 2, div 2 should change its style back to the default style.

My question is: How can I detect the mouseout event on data points?

That is how I define what happens when the data point is hovered.

myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
      title: {
      ...
      },
      tooltips: {
        enabled: true,
        custom: function(tooltip) {
          if (!tooltip) {
              return;
          }

          if(tooltip.dataPoints != null) {
            // here, the function that highlights the respective div is called, and it works fine
          }
        }
      }
    }
});

Is there such a thing for unhovering? I found out that there is a global events -> mousout option, but I don't figure out how to use it and I also think that it references the whole chart.

Thank you!

Answer 1

Not sure if this will help you, but I had a similar issue with stacked bar charts. I wanted to show values at the top of the bars, but I found that if the tooltips were open the values were written over the top of the tooltips, making both unreadable. I decided I wanted to show the values only if the tooltips were not showing (and were not rendered if a tooltip was open).

Turns out I can use the tooltip's opacity setting to determine if the tooltip is showing or not. This is very over-simplified, but this is what I came up with:

        options: {
            tooltips: {
                custom: function( tooltip ) {
                    if( tooltip.opacity > 0 ) {
                        console.log( "Tooltip is showing" );
                    } else {
                        console.log( "Tooltip is hidden" );
                    }
                    return;
                }
            }
        }

Having worked that out, I was then able to save a global variable that I could test elsewhere to see if the tooltip was showing.