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

Getting tooltip position and parameters.

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: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Getting tooltip position and parameters.

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
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”