title: ChartJs (ver: 2.8.0): Custom tooltip does not hide if clicked (or mouse pointer is moved) outside the chart canvas area
body: <p>I am using ChartJs (ver: 2.8.0) to render line chart with <strong>custom tooltip that would be visible on <code>click</code> event of the points.</strong></p>
  
  <p>The issue is that the custom tooltip does not hide when mouse pointer is moved outside the chart canvas area.</p>
  
  <p>To make the tooltip visible only on click event of the points, in the chart options I have made the chart to respond only on click events like this:</p>
  
  <pre><code>options: {
    events: ['click'],
  .....
  ..
  </code></pre>
  
  <p><strong>Please let me know if above is the correct way to show tooltip on click event and not any other events.</strong></p>
  
  <p>With this, both the default chart js tooltip and custom tooltip does not get hide by itself when mouse is moved (or clicked) outside of the chart canvas area.</p>
  
  <p>Can anyone please help me with the solution?</p>
  
  <p>Here is the <a href="https://jsfiddle.net/phpdeveloperrahul/bn3kvjr8/" rel="nofollow noreferrer">link to my JS Fiddle Example</a></p>
  
  <p>Below is my full code:</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var lineChartCustomTooltip = function (tooltip) {
    // Tooltip Element
    var tooltipEl = document.getElementById("chartjs-tooltip");
  
    if (!tooltipEl) {
      tooltipEl = document.createElement("div");
      tooltipEl.id = "chartjs-tooltip";
      tooltipEl.innerHTML = "&lt;table&gt;&lt;/table&gt;";
      this._chart.canvas.parentNode.appendChild(tooltipEl);
    }
  
    // Hide if no tooltip
    if (tooltip.opacity === 0) {
      tooltipEl.style.opacity = 0;
      return;
    }
  
    // Set caret Position
    tooltipEl.classList.remove("above", "below", "no-transform");
    if (tooltip.yAlign) {
      tooltipEl.classList.add(tooltip.yAlign);
    } else {
      tooltipEl.classList.add("no-transform");
    }
  
    function getBody(bodyItem) {
      return bodyItem.lines;
    }
  
    // Set Text
    if (tooltip.body) {
      var titleLines = tooltip.title || [];
      var bodyLines = tooltip.body.map(getBody);
  
      var innerHtml = "&lt;thead&gt;";
  
      titleLines.forEach(function (title) {
        innerHtml += "&lt;tr&gt;&lt;th&gt;" + title + "&lt;/th&gt;&lt;/tr&gt;";
      });
      innerHtml += "&lt;/thead&gt;&lt;tbody&gt;";
  
      bodyLines.forEach(function (body, i) {
        var colors = tooltip.labelColors[i];
        var style = "background:" + colors.backgroundColor;
        style += "; border-color:" + colors.borderColor;
        style += "; border-width: 2px";
        var span =
          '&lt;span class="chartjs-tooltip-key" style="' + style + '"&gt;&lt;/span&gt;';
        innerHtml += "&lt;tr&gt;&lt;td&gt;" + span + body + "&lt;/td&gt;&lt;/tr&gt;";
      });
      innerHtml += "&lt;/tbody&gt;";
  
      var tableRoot = tooltipEl.querySelector("table");
      tableRoot.innerHTML = innerHtml;
    }
  
    var positionY = this._chart.canvas.offsetTop;
    var positionX = this._chart.canvas.offsetLeft;
  
    // Display, position, and set styles for font
    tooltipEl.style.opacity = 1;
    tooltipEl.style.left = positionX + tooltip.caretX + "px";
    tooltipEl.style.top = positionY + tooltip.caretY + "px";
    tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
    tooltipEl.style.fontSize = tooltip.bodyFontSize + "px";
    tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
    tooltipEl.style.padding = tooltip.yPadding + "px " + tooltip.xPadding + "px";
  };
  
  var options = {
    type: "line",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          label: "# of Votes",
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1,
          borderColor: "red",
          pointBackgroundColor: "red",
        },
        {
          label: "# of Points",
          data: [7, 11, 5, 8, 3, 7],
          borderWidth: 1,
          borderColor: "blue",
          pointBackgroundColor: "blue",
        },
      ],
    },
    options: {
      events: ["click"],
      tooltips: {
        enabled: false, // disable the default tooltip
        custom: lineChartCustomTooltip, // use the custom tooltip
      },
      scales: {
        yAxes: [
          {
            ticks: {
              reverse: false,
            },
          },
        ],
      },
      title: {
        display: true,
        text: "Chart.js Line Chart - Custom Tooltips",
      },
    },
  };
  
  var ctx = document.getElementById("chartJSContainer").getContext("2d");
  new Chart(ctx, options);
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;canvas id="chartJSContainer" width="600" height="400"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>canvas { background-color : #eee;
  }
  
  #chartJSContainer {
      border: 1px solid;
  }
  
  canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
  
      #chartjs-tooltip {
        opacity: 1;
        position: absolute;
        background: rgba(0, 0, 0, .7);
        color: white;
        border-radius: 3px;
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        pointer-events: none;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
      }
  
      .chartjs-tooltip-key {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
      }
  </code></pre>