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';
                ...