2013-12-13 7 views
6

하이 차트 툴팁에 useHTML을 사용하여 zIndex를 가져와 다른 HTML 요소 위에 배치하려고합니다. - 대신 그 아래 내가 툴팁이 핑크 박스로 가고 싶습니다 http://jsfiddle.net/sDu8V/highcharts 툴팁 z- 인덱스

:

이 바이올린을 참조하십시오.

무엇이 누락 되었습니까? 전체 차트 totallly 중 하나 을 통해 또는 둘 모두 당신의 분홍색 아래 단일 SVG 개체에 렌더링되기 때문에

답변

11

가능한 해결 방법 : http://jsfiddle.net/sDu8V/1/

필수 CSS :

.highcharts-container { 
    position: inherit !important; 
} 
.highcharts-tooltip { 
    z-index: 9998; 
} 

감사 @Piotr에, 4.1.x에 대한 디자인을 업데이트했습니다.

+0

죄송합니다 @ Paweł Fus,하지만이 문제를 해결하는 방법을 모르겠습니다. jsfiddle에서 필자는 툴팁을 덮어 씌우는 분홍색 상자를 아직 변경하지 않고 툴팁을 얻습니다. Chrome과 Safari에서 테스트했습니다. 확인하고 확인해 주시겠습니까? – frandevel

+0

Hover IE -> 도구 설명이 분홍색 상자 위에 표시됩니다. 기억하고있는 것처럼 질문이었습니다. –

+1

솔루션을 약간 변경했습니다. http://jsfiddle.net/sDu8V/24/ 여백 및 향상된 내용 툴팁이 제거되었습니다. – Piotr

2

당신은 분홍색 박스로 렌더링하려면 툴팁을 가질 수 없습니다.

당신이 할 수있는 일은 배경을 투명하게 만들어 분홍색 상자 위에 전체 차트를 렌더링하는 것입니다.

차트 :

chart: { backgroundColor:'transparent' } 

귀하의 사업부는 차트 아래에 있어야한다 :

<div id="box" style="z-index:0"></div> 

라이브 예 : http://jsfiddle.net/7TcJ6/