Val
Posts: 3
Joined: Tue Nov 09, 2021 1:20 pm

Getting tooltip position and parameters.

Mon Jan 24, 2022 12:48 pm

Hi,

So what I'm trying to figure out is how I can get the exact position (x, y) and parameters (width, height) of the currently displayed tooltip.

Code: Select all

plotOptions: {
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: function (e) {
              const data = {
                plotX: this.tooltipPos[0],
                plotY: this.tooltipPos[1],
                x: this.category,
                points: seriesData.map(sd => ({
                  series: { name: sd.name },
                  y: sd.data[this.x]
                }))
              }

              setEvent(data)
            }
          }
        }
      }
    }
Basically, when the user clicks on one of the columns I'm hiding the displayed tooltip and instead will show a different box of data with an absolute position.

magdalena
Posts: 514
Joined: Tue Aug 24, 2021 1:32 pm

Re: Getting tooltip position and parameters.

Mon Jan 24, 2022 6:03 pm

Hi,

Thanks for contacting us with your question!

If you want to get tooltips height, width and coordinates, you can receive them inside the positioner function like this:

Code: Select all

var tooltipHeight = this.label.height,
        tooltipWidth = this.label.width,
        tooltipX = point.plotX,
        tooltipY = point.plotY;

Demo:
https://jsfiddle.net/BlackLabel/3sm6h1tg/

API Reference:
https://api.highcharts.com/highcharts/t ... positioner

Let me know if you have any further questions,
Regards!
Magdalena Gut
Highcharts support engineer

Return to “Highcharts Usage”