title: tooltip displays black block before displaying actual values in IE 10
body: <p>The tooltip in this fiddle works all fine in chrome, but it displays black block before displaying the actual value in IE10.</p>
  
  <p><a href="https://jsfiddle.net/c74eoo2b/11/" rel="nofollow noreferrer">Here's the fiddle</a></p>
  
  <p>Here is the code i have used to create tooltip</p>
  
  <pre><code>   .on('mouseover', function(d) {
      tooltip.transition()
          .style('opacity', 1.0)
          .style('background', 'white')
          .style('display','block')
  
  
      tooltip.html( d.global )
          .style('left',(d3.event.pageX - 35) + 'px')
          .style('top', (d3.event.pageY - 30) + 'px')
  })
  .on('mouseout', function(d) {
      tooltip.transition()
          .style('opacity', 1)
          .style('display','none')
  })
  </code></pre>
  
  <p>this is the style i have used for tooltip</p>
  
  <pre><code> .hor_tooltip {
  position: absolute;
  width: 50px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  display:none 
  </code></pre>