How To Bring A Selected (clicked On) Bootstrap Popover Forward When Multiple Popovers Are Open?

I am using a bootstrap popover on svg elements in D3. Multiple popovers can be open at any given time. What I would like to know is how to, on clicking on a popover at the back, to

Solution 1:

You should be able to do this in a click handler:

element.on("click", function() {
  d3.select(this).attr("z-index", d3.select(this).attr("z-index") + 1);
})

As @AmeliaBR pointed out, this won't really work if you have more than one popover though as the z-index is only incremented by one. In a case like this, you could have a global variable that keeps track of the maximum z-index and use that.