title: dynamic tooltip text d3 when select value change
body: <p>I am trying to draw a dynamic  choropleth map</p>
  
  <p>i select the properties to diplay from a selection input
   the property is mapped in a json dataset and is rapresented with the d3 choropleth tecnique</p>
  
  <p>when i try to diplay with an on mouse over tooltip the object value, the property doesn't refresh and the tooltip continue to show the old property's value.</p>
  
  <p>Any suggestions?? My code is below.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>    var divtool = d3.select("body").append("div")   
                  .attr("class", "tooltip")               
                  .style("opacity", 0);
  
          //onchange choropleth
              d3.selectAll(".demosearch").on("change", function () {
                      var t = this.value;
  
                            if(t  != 'none'){
  
                                  quantize.domain([
                                  d3.min(mn_map.features, function(d) { return d.properties[t]; }), 
                                  d3.max(mn_map.features, function(d) { return d.properties[t]; })
                                  ]);
  
                                  d3.selectAll("#mappa").attr("class", t)
                                  svg.selectAll(".comune")
                                     .data(mn_map.features) 
                                     .attr("class",  function(d) { return (quantize(d.properties[t])); })
                                     .style("opacity", 0.8);
  
                        //Adding mouseevents
                                     .on('mouseover', function (d) {
                                      d3.select(this).transition().duration(100).style({'opacity': 0.8, 'stroke': 'red', "stroke-width": 4  })
                              divtool.text(d.properties.NOME_COM + " : " +t+" : "+ d.properties[t])
                                     .style("opacity", 1) 
                                     .style("left", (d3.event.pageX) + "px")    .style("top", (d3.event.pageY -30) + "px");                                          })
  
  
                                     .on('mouseout', function (d) {                           d3.select(this).transition().duration(100).style({'opacity': 0.8, 'stroke': '#909090', "stroke-width": 1 });
                                      divtool.style("opacity", 0);
                                    })
                                              }// &lt;-- End if test this.value
  
                          else {
                           svg.selectAll("#mappa")
                              .transition().duration(500)
                              .attr("class","mappa" )
                           divtool.remove();  
                          };
  </code></pre>