How to make hover text on legend on multiple graphs in page

plotly.js
1

Hi I am trying to make a tooltip appear with a legend item is hovered, but I can only get one tooltip to appear on the first graph, but not any other graphs. Anyone see why this is?

Code for showing tooltip (for multiple graphs)

Plotly.plot(ele, data, style, { displaylogo: false }).then(this.attach);
ele.on(‘plotly_afterplot’, this.attach);

attach() {
const legendLayer = d3.select(‘g.legend’);
const items = legendLayer.selectAll(‘g.traces’);
let tooltip;
legendLayer.selectAll(’.tooltip’).remove();
items.on(‘mouseover’, (d) => {
tooltip = legendLayer.append(‘text’)
.classed(‘tooltip’, true)
.text(‘Hide/Show trace’);
});
items.on(‘mouseout’, () => {
if (tooltip) {
tooltip.remove();
}
});
}

As you can see - I want the tooltip ‘Hide/Show trace’ to show for every hovered legend item for all graphs on the page. Anyone can give me a hand?

2

^bump ^bump ^bump ^bump.