英文:
Issue with displaying custom tooltip on highcharts plotline labels
问题
I have to display information on hover over the plotlines label in highcharts.
I read through the highcharts documentation and found that the tooltip can only be used with the series data.
I've tried to come up with a solution by using the formatter
property.
"plotLines": [{
"color": "orange",
"value": 1680714047143,
"width": 2,
"label": {
"y": 15,
"style": {
"transform": "rotate(0deg)"
},
"enabled": true,
"useHTML": true,
"formatter": () => `
<div class="label-wrapper">
<div class="label-wrapper-title">Edit</div>
<div class="tooltip">
<div class="tooltip-action">Edit</div>
<div class="tooltip-text">
Added these sensor notes for edit action
</div>
</div>
</div>
`,
}
}],
.label-wrapper .tooltip {
background: white;
color: black;
padding: 5px;
border-radius: 5px;
display: none;
border: 1px solid black;
position: unset;
z-index: 999;
}
.label-wrapper-title:hover + .tooltip {
display: block;
}
.tooltip:hover {
display: block;
}
Here's a link to the jsfiddle: https://jsfiddle.net/sharadkalya/6eds8kLo/44/
There are two issues with this approach:
z-index
isn't working, and text seems to be overlapping each other.- The text is not all visible inside the tooltip.
In the screenshot below, I've hovered over the Edit
label to view more information (tooltip).
Is there a way to fix the above issue? Or is there an entirely different approach that can be used as an alternative?
英文:
I have to display information on hover over the plotlines label in highcharts.
I read through the highcharts documentation and found that the tooltip can only be used with the series data.
I've tried to come up with solution by using formatter
property.
"plotLines": [{
"color": "orange",
"value": 1680714047143,
"width": 2,
"label": {
"y": 15,
"style": {
"transform": "rotate(0deg)"
},
"enabled": true,
"useHTML": true,
"formatter": () => `
<div class="label-wrapper">
<div class="label-wrapper-title">Edit</div>
<div class="tooltip">
<div class="tooltip-action">
Edit
</div>
<div class="tooltip-text">
Added these sensor notes for edit action
</div>
</div>
</div>
`,
}
},
.label-wrapper .tooltip {
background: white;
color: black;
padding: 5px;
border-radius: 5px;
display: none;
border: 1px solid black;
position: unset;
z-index: 999;
}
.label-wrapper-title:hover + .tooltip{
display: block;
}
.tooltip:hover {
display: block;
}
Here's link to the jsfiddle.
https://jsfiddle.net/sharadkalya/6eds8kLo/44/
There are two issues with this approach:
z-index
isn't working and text seems to overlapping each other.- The text is not all visible inside the tooltip.
In below screenshot: I've hovered over Edit
label to view more information (tooltip).
Is there a way to fix the above issue?
Or is there entirely different approach that can be used as an alterantive?
答案1
得分: 1
以下是已经翻译好的内容:
在纯HTML + CSS 中重现相同的情况:https://jsfiddle.net/BlackLabel/w3vz5e7o/
正如您所看到的,具有 label-wrapper
类的 div
元素被包装在另一个元素中 - 带有 position: absolute
和 overflow: hidden
样式的 span
。
仅对于位于同一级别上的定位元素才有效,因此您需要使鼠标悬停的 span
的 z-index
高于未悬停的元素:
.highcharts-plot-line-label {
overflow: visible !important;
}
.highcharts-plot-line-label:hover {
z-index: 1;
}
实时演示: https://jsfiddle.net/BlackLabel/v2fp395y/
英文:
The same situation reproduced in pure HTML + CSS: https://jsfiddle.net/BlackLabel/w3vz5e7o/
As you can see, divs with label-wrapper
class are wrapped in another element - span
with position: absolute
and overflow: hidden
styles.
Using z-index
works only for positioned elements on the same level as each other first - so you need to make the hovered spana higher z-index than the non-hovered one:
.highcharts-plot-line-label {
overflow: visible !important;
}
.highcharts-plot-line-label:hover {
z-index: 1;
}
Live demo: https://jsfiddle.net/BlackLabel/v2fp395y/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论