SVGのツールチップのZ-インデックス（タイトルは

Question

）非常に大きなツールチップでHTMLタイトルを使用しようとしています。しかし、タイトルの上にツールチップの背景が表示されるようには見えません。

var chart = new Highcharts.Chart({ 
 
    "chart": { 
 
    "type": "gauge", 
 
    "renderTo": "chart-2-container", 
 
    "marginTop": 60 
 
    }, 
 
    "series": [{ 
 
    "data": [{ 
 
     "y": 55.6, 
 
     "name": "Area", 
 
     "tooltip": "Area: 50.6 %<br/>Minimum: 50.6<br/>3rd quartile: 57.1<br/>2nd quartile: 59.4<br/>1st quartile: 64.7<br/>Maximum: 75.7" 
 
    }], 
 
    "name": "%" 
 
    }], 
 
    "tooltip": { 
 
    "borderColor": "#E2E2E2", 
 
    "borderRadius": 5, 
 
    "backgroundColor": "white", 
 
    "style": { 
 
     "color": "#454545", 
 
     "fontSize": 14, 
 
     "fontFamily": "Arial, sans-serif", 
 
     "zIndex": 9999, 
 
     "lineHeight": 14 * 1.4 
 
    }, 
 
    "formatter": function() { 
 
     return this.point.tooltip; 
 
    } 
 
    }, 
 
    "title": { 
 
    "floating": true, 
 
    "useHTML": true, 
 
    "style": { 
 
     "zIndex": 1, 
 
    }, 
 
    "text": "<a href=\"http://www.google.com\">This is some link as a very long title which will probably wrap a couple of lines</a>" 
 
    }, 
 
    "yAxis": { 
 
    "title": null, 
 
    "tickPixelInterval": 72, 
 
    "tickLength": 10, 
 
    "minorTickLength": 8, 
 
    "minorTickWidth": 1, 
 
    "min": 50.6, 
 
    "max": 75.7, 
 
    "plotBands": [{ 
 
     "from": 50.6, 
 
     "to": 57.1, 
 
     "color": "#ee2c34", 
 
     "thickness": 15, 
 
    }, { 
 
     "from": 57.1, 
 
     "to": 59.4, 
 
     "color": "#f07627", 
 
     "thickness": 15, 
 
    }, { 
 
     "from": 59.4, 
 
     "to": 64.7, 
 
     "color": "#a88735", 
 
     "thickness": 15, 
 
    }, { 
 
     "from": 64.7, 
 
     "to": 75.7, 
 
     "color": "#2c876d", 
 
     "thickness": 15, 
 
    }] 
 
    }, 
 
    "pane": { 
 
    "startAngle": -150, 
 
    "endAngle": 150 
 
    } 
 
});

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='chart-2-container' style="width: 400px; height: 300px;"> 
 

 
</div>

（もフィドルhttps://jsfiddle.net/d6q1gt4m/など）

問題は、背景は、タイトルの後ろに常にあるということです。

は、ここに私のコードです。私は非HTMLのタイトルに切り替えることができますが、その後、タイトルが折り返している場合（そしてすべてのリンクスタイルを再適用する必要がある場合）、第1行だけが実際にはURLであるという問題があります。

誰でも、私はsvgのツールチップをHTMLの上に表示する方法を知っていますか？

注：可能であれば、私にはもう1つのワームを開くので、ツールチップにはuseHTMLを設定する必要はありません。

Answer 1

CSSを使用して、ツールチップとツールチップのフォーマッタを更新すると、この問題は解決されます。 https://stackoverflow.com/questions/：このトピックは参考にすべき参照チェックtooltip

更新ツールチップ

"tooltip": { 
    "backgroundColor": "rgba(255,255,255,0)", 
    "borderWidth": 0, 
    "borderRadius": 1, 
    "shadow": false, 
    "useHTML": true, 
    "style": { 
     "color": "#454545", 
     "fontSize": 14, 
     "fontFamily": "Arial, sans-serif", 
     "zIndex": 9999, 
     "lineHeight": 1.8 
    }, 
    "formatter": function() { 
     return "<div>" + this.point.tooltip + "</div>"; 
    } 
    }, 

CSS

.highcharts-tooltip { 
    z-index: 9998; 
} 

.highcharts-tooltip div { 
    background-color: white; 
    border: 1px solid #E2E2E2; 
    opacity: 1; 
    z-index: 9999!important; 
    padding: 5px 
} 

Fiddleデモ