title: D3 selection.html() , copy tooltip
body: <p>I have an svg element containing a circle with tooltip applied.</p>
  
  <p>I am using D3 <code>selection.html()</code> to clone this element and its contents into a new div. This works but the tooltip isn't copied across. How can I add the tooltip functionality to the new div?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;    
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!-- Create a div containing the action button --&gt;
      &lt;div class="container" id = "div1"&gt;
        &lt;button type="button"   onclick=clone() &gt;Clone&lt;/button&gt;       
      &lt;/div&gt; 
      &lt;!--Create a div that will hold the initial circle  --&gt;
      &lt;div class="container" id = "div2"&gt;
      &lt;/div&gt; 
      &lt;!--Create a div that will hold the cloned circle  --&gt;
      &lt;div class="container" id = "div3"&gt;
      &lt;/div&gt;    
    &lt;/body&gt;   
    &lt;script&gt;
      //Create an empty div that will hold the tooltip
      var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
  
  
      //Create some data 
      var mydata=
        [{"xval":50,"yval":50,"mytooltip":"first"}
        ,{"xval":100,"yval":100,"mytooltip":"second"}
        ]
      //Append the SVG element  
      var svg = d3.select("#div2")
        .append("svg") 
        .attr("width",500)
        .attr("height", 500);
      
      //Draw a circle for each row of data
      svg.selectAll("circle")
        .data(mydata).enter()
        .append("circle")
        .attr("cx", function(d){return d.xval})
        .attr("cy", function(d){return d.yval})
        .attr("r", 10) 
        .on("mouseover", function(d) {
         div.transition()
           .duration(200)
           .style("opacity", .9);
         div.html( d.mytooltip)
         })
        .on("mouseout", function(d) {
         div.transition()
           .duration(500)
           .style("opacity", 0);
         });
      //Copy the SVG element this works but the tooltup functionality is not copied     
      function clone() {
        var content = d3.select("#div2").html();
        var mymod = d3.select("#div3")
        .html(content);
      }
    &lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The full problem - in case I'm going about this the wrong way</strong>
  <br></p>
  
  <p>I have a series of svg elements, one per div containing graphs whose datapoints can be filtered using user input and which feature tooltips. </p>
  
  <p>I want the user to be able to enlarge an individual graph into a modal. I can do this by calling the function that draws the graph again when the modal loads, however this causes problems as I then need to re-apply the filtering.</p>
  
  <p>Consequently I'm using selection.html to clone the individual graphs into the tooltip (thus inheriting the filtering). This works with the exception that the tooltip functionality isn't replicated. How can I correct this.</p>