Tooltips for multiple lines chart with legend click d3.js

Question

I am trying to add tooltips on multiple lines chart following Mark's answer in this post and this example . Here is my JS bins https://jsbin.com/fexami/edit?html,js,output#J:L131

My design for this chart is..

When the chart is initialized, only the lines with solid color show up and the dashed lines are hidden. Dashed lines can show or hide when click A2 and B2 on the right side.

I was trying to add tooltips on the dashed lines but they do not show up when dashed lines are showing. I created the tooltips for dashed lines by adding class mouse-over-effects2 (line 133 - 223). Actually, all the code form line 133 to 223(code for dashed lines' tooltips) is copied from the code from line 225 to 315 (code for solid lines' tooltips) and just some names are changed. From inspect elements in the browser, it looks like the lines of code from 288-315 overwrite 196-223.

Second question is..How to insert "state” into the tooltips to make the tooltip show both the value of “y” and state. I was trying to add text after line 177, but it does not work. Here is my updated jsbins

Does anyone have idea to fix it? Thanks a lot!

Updated

Please ignore the first question. I just fixed it. But still don't know how to solve the second one. Can anyone help? Thanks a lot!

Answer 1

Yes - change

var lines = document.getElementsByClassName('line1');

to

var lines = document.getElementsByClassName('line2');

and the tooltips will display on the dashed lines.