I'm using the color picker with multiple handles on a Leaflet map to allow the user to choose different trail colors for better visibility on different basemaps. This works fine, but I would like to be able to label the different handles (maybe provide tooltips on hover?) so the user can tell which type of trail (for example, Carriage Roads, NPS Trails, Village Trails) will be affected by that handle.

I've tried attaching an event listener to the various handle classes (IroHandle--0, for example) and then changing the textContent of a div, which works when I hover, but then when I select another handle, the textContent of that div changes to one of the others. I can't quite see what is going on, and I wonder if there is a better way to accomplish this.

Can anyone give me some guidance? I can't share the data as-is, but can try to make a reduced version removing proprietary information if necessary. Thank you!