chart.js fiddle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<div class="lineChart">
  <div class="barInner gr-10 push-1 gr-12@t push-0@t u-clearfix">
    <div class="wrap">
      <canvas id="lineChart" width="1024" height="500"></canvas>
      <!--<canvas id="lineChartMobile" height="700" width="500"></canvas>-->
      <div id="chartjs-tooltip">
      </div>
    </div>
  </div>
</div>

SCSS

.lineChart {
  .wrap {
    div#chartjs-tooltip {
      position: absolute;
    }
  }
}

JavaScript

var labels = ["Test1", "Test2", "Test3", "Test4", "Test5"];
var data1 = [30, 19, 19, 26, 17];
var data2 = [18, 24, 20, 15, 30];
var showSuffix = "%";


var data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
  datasets: [{
    label: '# of Votes',
    data: [57, 48, 58, 64, 72],
    borderColor: "#c7d85e",
    color: "#c7d85e",
    borderWidth: 3,
    fill: false
  }, {
    label: '# of Motes',
    data: [50, 59, 60, 68, 69],
    borderColor: "#4f708b",
    color: "#4f708b",
    borderWidth: 3,
    fill: false
  }]
};

var options = {
  elements: {
    line: {
      tension: 0
    }
  },
  tooltips: {
    enabled: true,

    tooltipTitleFontSize: 0,
    titleFontSize: 0,
    titleFontColor: 'black',
    title: false,

    backgroundColor: 'rgba(255,255,255,0)',
    displayColors: false,
    callbacks: {
      label: function(tooltipItems, data) {
        return tooltipItems.yLabel + '%';
      }
    },
    borderWidth: 2,
    borderColor: 'black',

    bodyFontSize: 20,
    bodyFontFamily: 'Helvetica Neue',
    bodyFontColor: 'black',

    titleMarginBottom: 0,
    custom: function(tooltipModel) {

        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');

        // Create element on first render
        if (!tooltipEl) {
          tooltipEl = document.createElement('div');
          tooltipEl.id = 'chartjs-tooltip';
          tooltipEl.innerHTML = "<table></table>";
          document.body.appendChild(tooltipEl);
        }

        // Hide if no tooltip
        if (tooltipModel.opacity === 0) {
          tooltipEl.style.opacity = 1;
          return;
        }

        tooltipModel.opacity = 1;

        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltipModel.yAlign) {
          tooltipEl.classList.add(tooltipModel.yAlign);
        } else {
          tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
         ...