[Chartjs]-Link in ChartJS tooltip not clickable

by

1👍

Remove

        tooltipEl.style.pointerEvents = 'none';

and any of theese from CSS

        pointer-events: none;

1👍

I’ve faced the very problem myself, so I tried to remove this line:

tooltipEl.style.pointerEvents = 'none';

but it didn’t work as expected – every time I hovered over the tooltip it disappeared.

Then, I tried this:

  1. Keep the line above just as it is;

  2. Modify events prop of the options. (See docs).
    By doing this, you actually remove ‘mouseout’ event from the default config.

    const options = {
         maintainAspectRatio: false,
         events: ['mousemove', 'click', 'touchstart', 'touchmove'],
         plugins: {
             tooltip: {
                 enabled: false,
                 external: externalTooltipHandler
             },
             legend: {
                 display: false
             }
         },
     }

  3. Then, remove pointer-events from the sole clickable element of the tooltip. In my case, it is li element. I did this with CSS. li { pointer-events: auto; }

When 1-3 steps are completed, the external tooltip is supposed to behave as expected AND the link elements contained in that tooltip should be clickable.

Leave a comment