Search code examples
javascripthighcharts

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

enter image description here

Is there a way to fix the above issue? Or is there entirely different approach that can be used as an alterantive?

Solution

  • 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/