title: D3js Use element's current color in tooltip
body: <p>Been learning D3.js for a couple weeks now. I'm going back and cleaning up some of my code, making it a bit more efficient. I have a paired bar chart, on mouse-over a tooltip is generated. The title in the tooltip matches the color of the particular bar. </p>
  
  <p><img src="https://i.stack.imgur.com/5Q9dH.jpg" alt="tooltip hover"></p>
  
  <p>This is the deisred effect. However, I'm statically setting the color from my color array:</p>
  
  <pre><code>d3.select("#tooltip")
          .select("#keyword")
          .style("color", colors[0][2])
          .text(d.keyword);
  </code></pre>
  
  <p>I would assume I could have it select the color of the current bar &amp; apply it in the tooltip on mouseover. How can this be setup? (Maybe I'm mixing things with Jquery and using $this to select.)</p>
  
  <p>I would rather use javascript to detect the color it is hovering over &amp; apply that color. So I need some sort of anonymous function in place of <code>colors[0][2]</code> </p>
  
  <p>Drew up a <a href="http://jsfiddle.net/enigmarm/Hv867/1/" rel="nofollow noreferrer"><strong>Fiddle to play around with full code</strong></a>.</p>