How to change z-index of chart js tooltip?

I have 4 charts placed side by side using bootstrap's grid system. One of the chart's width is just one col wide (col-md-1), which uses bubble chart(simply shows circles from top to bottom). However, when I hover on the bubble, the tooltip gets truncated. I tried to change z-index of the div inside which the chart element is placed, but that did not solve the problem.

This is how it shows up on mouse over:

Kindly let me know how can I change the z-index of the tooltip element.

Update: I have created a fiddle if that helps: jsfiddle

Code:

<div class="container-fluid">
        <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5">
                col 5
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1">
                <div style="height: 60vh;">
                    <canvas id="can" />
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6">
                col 6
            </div>
        </div>
    </div>