adim1973
Posts: 3
Joined: Mon Jun 10, 2024 12:40 pm

Custom tooltip text

I have a chart where I'm adding annotations on the fly and I want to show a tooltip when the mouse is over an annotation (the tooltip should show annotation specific text). Everything works fine, except for the fact that I don't know how to change the tooltip text on mouseover.

Here is the chart events code, where:
- in load event I'm adding a custom tooltip, with a generic label text (the annotations are not available at this point)
- in redraw event I'm looping through annotation labels and add the mouseenter and mouseleave events to each annotation label

In onMouseEnter function I need to change the chart.customTooltip label text to the annotation label specific text (the tooltip constant). Is this possible? If not, how can this behavior be achieved?

Thank you for your time,
Adrian

L.E. I tried but it doesn't work

Code: Select all

            chart.customTooltip.text.textStr = tooltip
            chart.customTooltip.textStr = tooltip

Code: Select all

chart: {
      events: {
        load: function (this: any) {
          const chart = this

          chart.customTooltip = chart.renderer
            .label('tooltip', 0, 0, 'callout', 0, 0)
            .attr({
              fill: 'rgba(247,247,247,0.85)',
              r: 6,
              'stroke-width': 1,
              stroke: '#f00'
            })
            .add()
            .toFront()
            .hide()
        },

        redraw: function (this: any) {
          const chart = this

          const onMouseEnter = function (
            annGraphic: any,
            ele: any,
            idx: number,
            event: any
          ) {
            const { x, y } = event
            const tooltip = ele.annotation.userOptions.labels[idx].tooltip

            const tooltipBBox = chart.customTooltip.getBBox()
            const centerX = annGraphic.x + annGraphic.width / 2
            const centerY = annGraphic.y - annGraphic.height / 2

            chart.customTooltip
              .attr({
                x: centerX - tooltipBBox.width / 2,
                y: centerY - tooltipBBox.height / 2 - 15,
                anchorX: centerX,
                anchorY: centerY
              })
              .show()
          }

          const onMouseLeave = function () {
            chart.customTooltip.hide()
          }

          const annotations = chart.annotations[0].labels

          annotations.forEach((ele: any, idx: number) => {
            const annGraphic = annotations[idx].graphic
            if (annGraphic) {
              annGraphic.element.addEventListener(
                'mouseenter',
                (event: MouseEvent) =>
                  onMouseEnter(annGraphic, ele, idx, event as any)
              )
              annGraphic.element.addEventListener(
                'mouseleave',
                (event: MouseEvent) => onMouseLeave()
              )
            }
          })
        }
}
adim1973
Posts: 3
Joined: Mon Jun 10, 2024 12:40 pm

Re: Custom tooltip text

Found the solution, if anyone is interested: the text can be changed like this

Code: Select all

chart.customTooltip.attr({
  text: tooltip
})
jakub.s
Site Moderator
Posts: 1311
Joined: Fri Dec 16, 2022 11:45 am

Re: Custom tooltip text

Hi adim,

Thanks for sharing and that's right!

For custom tooltips, you can definitely use the .attr method and set the text.

For standard tooltips, you can use the format string or formatter function.

API:
- https://api.highcharts.com/highcharts/tooltip.format
- https://api.highcharts.com/highcharts/tooltip.formatter

Demo: https://jsfiddle.net/BlackLabel/9eb1vrs8/

For non-standard tooltips like yours, you can absolutely follow the approach that you've shared here.

I see that there is another topic related to this here: viewtopic.php?t=52505

Does that mean that you solved the latter issue as well?

If not, let me know if you have any more questions about this.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Usage”