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

【问题标题】：How to change z-index of chart js tooltip?如何更改图表js工具提示的z-index？
【发布时间】：2017-12-19 12:47:17
【问题描述】：

我使用引导程序的网格系统并排放置了 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>

【问题讨论】：

我们可以看看你的工具提示的css代码吗？你把它放在你的标记中的什么位置？
工具提示还没有 css。我还没有创建它。但是我无法确定目标元素或其类，因此我可以对其进行修改。
css 不用于chart.js 工具提示的样式，请看下面我的回答
这个问题你解决了吗？我也有同样的情况。
牧羊人，我不得不使用 Chartjs 插件。这可能会对您有所帮助：jsfiddle.net/patrickactivatr/ytLtmLgs/2

标签： twitter-bootstrap css tooltip chart.js

【解决方案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" 的宽度。

【讨论】：