I'm working with a popover on all circles in my SVG file. Everything seems to work fine at first, if you click on a cirlce popover then it appears where I want it to appear. If you scroll when te popover is already open then it follows the circle like it should and stays in the right place. But when the popover is hidden and you click it after you scrolled down it places my popover way too high up.
Here's a screenshot how it looks if we click the circle without scrolling:
Here's a screenshot how the popover positions itself when we click it after we scrolled down a little:
My SVG file looks like this (left some layers out so it doesn't get unnecessary long):
<svg id="svg3336" xmlns="http://www.w3.org/2000/svg" height="542" viewBox="0 0 800 542" width="800" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g id="zeemanGroep" fill="#d40000" class="bluetooth">
<circle id="zeeman" r="0" cy="95.064" cx="111.3" fill-opacity="0.5" />
<text id="zeemantext" y="95.064" x="111.3" text-anchor="middle" stroke="#000000" stroke-width="2px" dy=".3em" ></text>
</g>
<g id="mediamarktGroep" fill="#d40000" class="jpurse" >
<circle id="mediamarkt" r="0" cy="383.65" cx="568.57" fill-opacity="0.5"/>
<text id="mediamarkttext" y="383.65" x="568.57" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em"></text>
</g>
<g id="blokkerGroep" fill="#d40000" class="wifi" >
<circle id="blokker" r="0" cy="135.8" cx="542.18" fill-opacity="0.5"/>
<text id="blokkertext" y="135.8" x="542.18" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em"></text>
</g>
<g id="popupGroep" fill="#d40000" class="wifi" >
<circle id="popup" r="0" cy="106.54" cx="689.62" fill-opacity="0.5" />
<text id="popuptext" y="106.54" x="689.62" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em"></text>
</g>
The svg gets loaded in a div inside my html with the help of d3. I also use this function to place a popover on all the groups that have a circle inside of them.
Here's a part of the javascript code:
d3.xml("images/FloorplanScanners.svg", function (error, xml) {
if (error)
throw error;
var importedNode = document.importNode(xml.documentElement, true);
var clone = importedNode.cloneNode(true);
document.querySelector("svg").appendChild(clone);
var circles = document.getElementsByTagName("circle");
console.log(circles);
for (i = 0; i < circles.length; i++)
{
var circle = circles[i];
var group = circle.parentElement;
var titel = circle.id;
var content = berekenPopovercontent(circle);
d3.select(group).each(function(){
$(this).popover({title:titel, content: content, container:"body", html:true});
});
}});
The last two lines in my javascript are the ones that place the popover.
Where's it going wrong, I have a feeling it has something to do with the "container:'body'" part. But without this it's not possible to put this popover on my svg elements.
Edit: When scrolling to the right the same thing happens but now the popover places itself too much to the left.