title: Issue with overlapping toolitp d3.js
body: <p>I found <a href="https://stackoverflow.com/questions/35757899/how-to-avoid-overlapping-tooltips-of-multi-series-line-chart-d3-js">this is a very helpful example</a> to create tooltip on line charts. I am following this to work on a line chart now. The difference is the tooltip in my chart has a box/background to contain the value showing in the tooltip, so I add <code>append('rect')</code> with <code>attr('fill', 'white')</code>.</p>
  
  <pre><code>mousePerLine.append('rect').
     attr('width', '38px').
     attr('height', '20px').
     attr('class', 'tooltipRect').
     style('fill', 'white').
     attr('transform', 'translate(5,-13)');
  </code></pre>
  
  <p>To avoid overlapping of text <strong>as well as rect</strong>, I changed line 292 according to a post here <a href="https://stackoverflow.com/questions/15702724/how-to-select-multiple-selectors-with-selectall">How to select multiple selectors with selectAll?</a></p>
  
  <pre><code>  .select("text")
  
      .attr("transform", function(d,i) {
          return "translate (10,"+(3+ypos[i].off)+")";
      })
  </code></pre>
  
  <p>to</p>
  
  <pre><code>  .selectAll(".tooltipRect, text")
  
      .attr("transform", function(d,i) {
          return "translate (10,"+(3+ypos[i].off)+")";
      })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/fk6gfwjr/3/" rel="nofollow noreferrer">Here's a fiddle of the problem.</a></p>
  
  <p>However, the tooltips are still overlapping. Can anyone help to figure out what is the cause of the problem? Thanks in advance!</p>