[Chartjs]-Need help in figuring out config for a custom tooltip (chartjs)

        var canvas = document.getElementById('myChart');
    
        var data = {
            data: [65, 59, 80, 0, 56, 55, 40],
            rate: [9, 20, 15, 40, 33, 20, 15],
            meetings: [1, 2, 3, 4, 4, 2, 1],
            mails: [1000, 2000, 2500, 3000, 2500, 1500, 2500]
        }

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

            // 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');
            }
            
            if (tooltip.dataPoints.length) {
                var ind = tooltip.dataPoints[0].index;
                $("#spn-leads").text(data.data[ind]);
                $("#spn-meetings").text(data.meetings[ind]);
                $("#spn-mails").text(data.mails[ind]);
                $("#spn-rate").text(data.rate[ind]);
            }

            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._fontFamily;
            tooltipEl.style.fontSize = tooltip.fontSize;
            tooltipEl.style.fontStyle = tooltip._fontStyle;
            tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
        };

        var lineData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 5,
                    pointHitRadius: 10,
                    data: data.data
                }
            ]
        };


        var option = {
            title: {
                display: true,
                text: 'Chart.js - Custom Tooltips'
            },
            tooltips: {
                enabled: false,
                mode: 'index',
                position: 'nearest',
                custom: customTooltips
            }
        };
        var myLineChart = Chart.Line(canvas, {
            data: lineData,
            options: option
        });

 canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    #chartjs-tooltip {
        opacity: 1;
        position: absolute;
        background: white;
        color: black;
        border: 1px solid black;
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        pointer-events: none;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        min-width: 200px;
    }

    .chartjs-tooltip-key {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="myChart" width="400" height="250"></canvas>

<div id="chartjs-tooltip" class="center bottom">
    <p><i>29th Sep 2016</i></p>
    <div style="float: left;">
        <span>No of leads: <span style="color: blue" id="spn-leads"></span></span><br />
        <span>No of meetings: <span style="color: blue" id="spn-meetings"></span></span><br />
        <span>Mails sent: <span style="color: blue" id="spn-mails"></span></span>
    </div>
    <div style="float: left; margin-left: 30px; text-align: center;">
        <span style="color: red" id="spn-rate"></span><br />
        <span>Success</span><br />
        <span>Rate</span>
    </div>
</div>