如何更改图表js工具提示的z-index？

Question

我使用bootstrap的网格系统并排放置了4个图表。其中一个图表的宽度只有一个宽度（col-md-1），它使用气泡图（只显示从上到下的圆圈）。但是，当我将鼠标悬停在气泡上时，工具提示会被截断。我试图改变放置图表元素的div的z-index，但这并没有解决问题。

这是鼠标显示的方式：

请告诉我如何更改工具提示元素的z-index。

更新： 如果有帮助，我创造了一个小提琴： jsfiddle

代码：

<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>

Answer 1

CSS不用于chart.js中的样式工具提示，因此您无法更改z-index。

我建议您阅读有关http://www.chartjs.org/docs/latest/configuration/tooltip.html

工具提示样式的文档

要解决您的问题，您必须使用该图表的画布增加容器的大小。在你的小提琴中，这意味着增加div class="col-md-1 col-sm-1 col-xs-1"的宽度。