shictins shictins - 6 months ago 24
CSS Question

Javascript Map Tooltip Alignment

I recently had a developer back out on my project at the 95% completion mark and have been trying to complete this project on my own. I am currently working on the tooltip placement on the map found on this page:

https://www.shiftins.com/homeowners-insurance-california/

You can see the source here:

https://www.shiftins.com/county/index.html

There are 2 issues I need help resolving.


  1. The tooltip for the bar charts should be located at the mouse pointer; however, it is located way right of the charts

  2. The tooltip for the map portion seems to disappear on the bottom right half of the counties when scaled down.



I have spent quite a few hours with the trial-and-error method trying multiple solutions but I can't seem to figure it out (especially since I am not a developer).

Answer

For the map tooltip to appear , instead of padding-left for bar char ,give left property;. This is because ,now the bar chart is overlapping on map chart,If you keep a border you can see the overlapping clearly.

 <div id="linechart" class="col-sm-3" style="width: 60%;padding-left:120px;">

change this line to

     <div id="linechart" class="col-sm-3" style="width: 60%;left:125px;">

For the bar tool tip to appear, Now d3.event.pageX gives the x coordinate value of mouse.To get the accurate x value,you need to minus the offsetLeft value

 var x = d3.event.pageX + 5-document.getElementById("linechart").offsetLeft;
Comments