チャートjsのツールチップのZ-インデックスを変更するには？

Question

私は、ブートストラップのグリッドシステムを使って4つのチャートを並べて配置しました。チャートの幅の1つは、1列幅（col-md-1）で、バブルチャートを使用しています（上から下に円が表示されます）。しかし、私がバブルに乗ると、ツールチップが切り詰められます。チャート要素が配置されているdivのz-indexを変更しようとしましたが、問題は解決しませんでした。親切に私はtooltip要素のzインデックスを変更することができます方法を知ってみましょう

：

これは、上にマウスでアップ方法を示しています。

更新： 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"。