title: Adding tooltip elements after updating data using d3 enter method
body: <p>I have been trying to solve a tooltip problem for quite some time now. I have searched through Stackoverflow and I think my problem is that I am not yet knowledgable enough to piece together a solution from existing posts.  I am working on a d3 chart which you can view here, in all its broken glory: </p>
  
  <p><a href="http://www.gailzdesign.com/coded.html" rel="nofollow">Link to broken chart.</a></p>
  
  <p>The default "Global" view works. When the "US" button is pressed, the data update correctly; but the tooltips do not. There are more data points in the US dataset than the default Global dataset. The difference in data points is the exact number of tooltips I am missing. I am struggling to use the Update Selection to gain access to the entering tooltips, I can't seem to get at them.</p>
  
  <p>Below please find the d3 code I am using to generate the default view (this is working for me so far):</p>
  
  <pre><code>d3.tsv("data/global.tsv", function(error, data) {
          data.forEach(function(d){
          d.change = +d.change;
          d.score = +d.score;
  });
  
  
  //Create circles            
  svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
          return xScale(d.change);
      })
      .attr("cy", function(d){
          return yScale(d.score); 
      })
      .attr("r", 7)
      .attr("class","chart")
      .style("opacity",.8)
      .style("fill", function(d) {
          return d.code;
      })
      .on("mouseover", function(d) {
          var xPosition = parseFloat(d3.select(this).attr("cx"));
          var yPosition = parseFloat(d3.select(this).attr("cy"));
  
          //Update the tooltip position and value
          d3.select("#tooltip")
              .style("left", xPosition + "px")
              .style("top", yPosition + "px")
              .select("#brand")
              .style("color", d3.select(this).style("fill"))
              .text(d.brand);
  
          d3.select("#tooltip")
              .select("#change")
              .text(d.change);
  
          d3.select("#tooltip")
              .select("#score")
              .text(d.score);
  
          //Show the tooltip
          d3.select("#tooltip").classed("hidden", false);     //quickly apply or remove classes from an element
          })
  
      .on("mouseout", function() {
  
          //Hide the tooltip
          d3.select("#tooltip").classed("hidden", true);  //quickly apply or remove classes from an element
          })  
  
  }); //this ends the code on the selected svg element
  </code></pre>
  
  <p>The block of code below correctly updates my scatterplot when a user clicks on the "US" button: </p>
  
  <pre><code>d3.selectAll("#us_data").on("click", function() {
      d3.tsv("data/us.tsv", function(error, data) {
          data.forEach(function(d) {
              d.change = +d.change;
              d.score = +d.score;
      });
  
      var circles = svg.selectAll("circle")
          .data(data);
  
  
      circles.enter()
          .append("circle")   
          .attr("cx", function(d) { return xScale(d.change); })
          .attr("cy", function(d){ return yScale(d.score); })
          .attr("r", 7)
          .attr("class","chart")
          .style("opacity",.8)
          .style("fill", function(d) { return d.code; });
  
      circles.transition()
          .duration(500)
          .attr("cx", function(d) { return xScale(d.change); })
          .attr("cy", function(d){ return yScale(d.score); })
          .attr("r", 7)
          .attr("class","chart")
          .style("opacity",.8)
          .style("fill", function(d) { return d.code; });
  </code></pre>
  
  <p>But when I try to use the same format to update my tooltips for the US selection, nothing happens. I do not yet understand enough JavaScript (or d3) to stray far from existing conventions... so I am sure this is where I fall down.</p>
  
  <pre><code>    var labels = d3.selectAll("#tooltip")
          .data(data);
  
  
      labels.enter()
          .append("#tooltip")
          .select("#brand")
          .style("color", d3.select(this).style("fill"))
          .text(d.brand);
  
      labels.transition()
          .duration(500)
          .select("#brand")
          .style("color", d3.select(this).style("fill"))
          .text(d.brand);
  
  
      labels.enter()
          .append("#tooltip")
          .select("#change")
          .text(d.change);
  
      labels.transition() 
          .duration(500)
          .select("#change")
          .text(d.change);
  
      labels.enter()
          .append("#tooltip")
          .select("#score")
          .text(d.score); 
  </code></pre>
  
  <p>I am using this code to create the tooltips on my html page:</p>
  
  <pre><code>    &lt;div id="tooltip" class="hidden"&gt;
          &lt;p&gt;Brand: &lt;strong&gt;&lt;span id="brand"&gt;name&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;Change: &lt;span id="change"&gt;100&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;Score: &lt;span id="score"&gt;100&lt;/span&gt;&lt;/p&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Any advice is greatly appreciated. </p>
  
  <p>Best, Gail Z</p>