title: How to get tippy.js to use individual svg elements as targets when the SVG is embedded in an HTML object tag?
body: <p>I have an svg embedded in HTML using an object tag </p>
  
  <pre><code>&lt;div id="svgDiv"&gt;
  &lt;object id="svgObjectElement" data="mysvg.svg" type="image/svg+xml"&gt;
              Your browser doesn't support SVG.
  &lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to use the tippy.js library to provide tooltips for circles in my svg, but I can't seem to get tippy to use the circles in mysvg as targets. If the svg is in the HTML (like this line element) it works great.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;svg height="50" width="50"&gt;&lt;line x1="0" y1="0" x2="50" y2="50" style="stroke:tomato;stroke-width:5"&gt;&lt;/line&gt;&lt;/svg&gt;
  &lt;div id="svgDiv"&gt;
  &lt;object id="svgObjectElement" data="mysvg.svg" type="image/svg+xml"&gt;
              Your browser doesn't support SVG.
  &lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>tippy('line', {
      content: 'Custom Line Tooltip',
  })
  </code></pre>
  
  <p>I have tried the following JavaScript where circle1 is the id of a circle in the svg but it doesn't work:</p>
  
  <pre><code>var svgDocument = document.getElementById("svgObjectElement").contentDocument;
  var element = svgDocument.getElementById("circle1");
  tippy(element, {
      content: 'Custom circle Tooltip',
  });
  </code></pre>
  
  <p>I have also tried</p>
  
  <pre><code>var svgDocumentElement= document.getElementById("svgObjectElement").contentDocument.documentElement;
  var element = svgDocumentElement.getElementById("circle1");
  tippy(element, {
      content: 'Custom circle Tooltip',
  });
  </code></pre>
  
  <p>which doesn't work. I am using Chrome if that is relevant. Any ideas would be appreciated.</p>