Bootstrap popover with SVG element from file is wrongly positioned

Question

I'm trying to show bootstrap popover by click on svg circle. SVG content is loaded from file:

<object type="image/svg+xml" id="svgobj" data="test.svg"></object>

Now I have 2 issues:

1) Wrong position of a popover

2) After closing by "x" button a popover shows again only on second button click

  var svg = document.getElementById("svgobj");
  var svgDoc = svg.contentDocument;
  var circle = $(svgDoc.getElementById("circle"));
  var opts = {
    title: '<span class="text-info">Title</span><button type="button" id="close" class="close" onclick="$(&quot;.popover&quot;).popover(&quot;hide&quot;);">&times;</button>',
    html: true,
    content: 'Content',
    trigger: 'click',
    placement: 'auto',
    container: 'body'
  };

  circle.popover(opts);

Plunker is here http://plnkr.co/edit/HwQhJEGSZIf8f6JxilEI?p=preview

Answer 1

In order to proper positioning of a popover I've used d3.js to load SVG from file:

svg = d3.select("#svgplace")
.append('svg:svg')
.attr('width', "600px")
.attr('height', "600px")

d3.xml("test.svg", "image/svg+xml", function (error, xml) {
    if (error) throw error;
    var importedNode = document.importNode(xml.documentElement, true);
    var clone = importedNode.cloneNode(true);
    document.querySelector("svg").appendChild(clone);
}

2-nd issue caused by the bug in bootstrap since v3.3.5: Tooltip/Popover methods show/hide/toggle don't work properly with click triggering

Fix:

if ($.fn.popover.Constructor.VERSION == "3.3.5" || $.fn.popover.Constructor.VERSION == "3.3.6") {
  $('[data-toggle="popover"]').on("hidden.bs.popover", function() {
    $(this).data("bs.popover").inState.click = false
  })
}