title: Chart.js / Javascript How to Override Mouseout Event Listener
body: <p>I am trying to use chart.js to create a bar chart with a custom html tooltip.  I would like to include some interactive stuff in the tooltip.  The problem is that by default, when the mouse leaves the chart canvas, the opacity of the tooltip goes to 0.  I need to override the mouseout event so that users can interact with the tooltip.</p>
  
  <p>The official documentation is good, but not comprehensive... I cannot find an official answer, so I have resorted to reviewing the open source code and my developer tools.</p>
  
  <p>Using Google Chrome's developer tools, I can click on the canvas and look at the event listeners tab.  Under mouseout, I see the following:</p>
  
  <pre><code>canvas#chart_0.dashboard-chart.chartjs-render-monitor   chart.js 10969
  </code></pre>
  
  <p>removing this listener in the developer tools fixes the problem.  when I click the link I can see the following code that is used to add the listener, and if I set a breakpoint I can see it being added:</p>
  
  <pre><code>...
  addEventListener: function(chart, type, listener) {
          var canvas = chart.canvas;
          if (type === 'resize') {
              // Note: the resize event is not supported on all browsers.
              addResizeListener(canvas, listener, chart);
              return;
          }
  
          var expando = listener[EXPANDO_KEY] || (listener[EXPANDO_KEY] = {});
          var proxies = expando.proxies || (expando.proxies = {});
          var proxy = proxies[chart.id + '_' + type] = function(event) {
              listener(fromNativeEvent(event, chart));
          };
  
          addEventListener(canvas, type, proxy);
      },
  ...
  </code></pre>
  
  <p>Hover I get chart.js from a CDN and would prefer to override this with my own javascript, rather than rolling a customized version of chart.js.  I can't figure out how to remove the handler, though.  I have tried the following after the chart.js script loads:</p>
  
  <pre><code>$('canvas').off('mouseout');
  $('canvas#chart_0').off('mouseout');
  $('canvas#chart_0.dashboard-chart.chartjs-render-monitor').off('mouseout');
  $('#chart_0').off('mouseout');
  $('.chartjs-render-monitor').off('mouseout');
  </code></pre>
  
  <p>None of these selectors remove the event listener.  I have also tried something to the effect of <code>$('canvas#chart_0')[0].removeEventListener('mouseout')</code> but this requires the listener as a parameter, and I'm not sure how to get a reference to that since it is passed anonymously.  Can anyone recommend a way of getting rid of the default event listener, or a way to pass a configuration option to chart.js to override the default behavior?  Thanks in advance.</p>