Issue with displaying custom tooltip on highcharts plotline labels

huangapple go评论97阅读模式
英文:

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).

Issue with displaying custom tooltip on highcharts plotline labels

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.

    &quot;plotLines&quot;: [{
        &quot;color&quot;: &quot;orange&quot;,
        &quot;value&quot;: 1680714047143,
        &quot;width&quot;: 2,
        &quot;label&quot;: {
          &quot;y&quot;: 15,
          &quot;style&quot;: {
            &quot;transform&quot;: &quot;rotate(0deg)&quot;
          },
          &quot;enabled&quot;: true,
          &quot;useHTML&quot;: true,
          &quot;formatter&quot;: () =&gt; `
            	&lt;div class=&quot;label-wrapper&quot;&gt;
              	&lt;div class=&quot;label-wrapper-title&quot;&gt;Edit&lt;/div&gt;
                &lt;div class=&quot;tooltip&quot;&gt;
                  &lt;div class=&quot;tooltip-action&quot;&gt;
                	  Edit
                  &lt;/div&gt;
                  &lt;div class=&quot;tooltip-text&quot;&gt;
                    Added these sensor notes for edit action
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            `,
        }
      },

.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).

Issue with displaying custom tooltip on highcharts plotline labels

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: absoluteoverflow: hidden 样式的 span

仅对于位于同一级别上的定位元素才有效,因此您需要使鼠标悬停的 spanz-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/

huangapple
  • 本文由 发表于 2023年6月13日 16:08:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76462883.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定