title: d3 tooltip selection not by class name
body: <p>I am trying to remove a tooltip from my SVG object on <code>mouseout</code> event but I don't want to select it by the class name. Is there another way to select it? Perhaps I can add an id property to it and then select by that?</p>
  
  <pre><code>  state.selectAll("rect")
         .on("mouseover", function(d){
  
            var delta = d.y1 - d.y0;
            var group = d3.select(d3.select(this).node().parentNode);
            var xPos = d3.transform(group.attr("transform")).translate[0];
            var yPos = parseFloat(d3.select(this).attr("y"));
            var height = parseFloat(d3.select(this).attr("height"))
            var width = parseFloat(d3.select(this).attr("width"))
  
            d3.select(this).attr("stroke","red").attr("stroke-width",0.8);
  
            svg.append("text")
            .attr("x",xPos)
            .attr("y",yPos + height/2)
            .attr("font-family", "sans-serif")
            .attr("font-size", "10px")
            .attr("font-weight", "bold")
            .attr("fill", "black")
            .attr("text-anchor", "middle")
            //.attr("class", "tooltip")
            .attr("transform", "translate(" + width/2 + ")")
            .text(d.name +": "+ delta);
  
         })
         .on("mouseout", function(){
            svg.select(".tooltip").remove(); // don't want to use that line
            d3.select(this).attr("stroke","pink").attr("stroke-width",0.2);
  
          });
  </code></pre>