JSFiddle - React, Tailwind, and code Playground

by Edi Carlos

HTML

<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

JavaScript

//register custome positioner
Chart.Tooltip.positioners.custom = function(elements, position) {
    if (!elements.length) {
      return false;
    }
    var offset = 0;
    //adjust the offset left or right depending on the event position
    if (elements[0]._chart.width / 2 > position.x) {
      offset = 20;
    } else {
      offset = -20;
    }
    return {
      x: position.x + offset,
      y: position.y
    }
  }
  //Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
  type: 'line',
  options: {
    title: {
      display: true,
      text: 'Example tooltip',
    },
    layout: {
      padding: 32
    },
    tooltips: {
      //use our new custom position
      position: 'custom'
    },
  },
  data: {
    labels: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
    datasets: [{
      label: 'data1',
      data: [5, 56, 90, 6, 42, 67, 32, 24, 20, 18, 56],
      borderColor: '#1acc1c',
      backgroundColor: 'RGBA(26, 10, 55, .1)',
      pointBorderColor: "#4Bd1C0",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }, {
      label: 'data2',
      data: [2, 12, 24, 30, 39, 58, 10, 82, 34, 89, 5],
      borderColor: '#34315a',
      backgroundColor: 'RGBA(132, 2, 34, .7)',
      pointBorderColor: "#34495e",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }]
  }
});