Как перенести выбранный (щелкнув) бутстрап вперед, когда открыты несколько popovers?

Question

Я использую bootstrap popover на элементах svg в D3. Несколько popovers могут быть открыты в любой момент времени. То, что я хотел бы знать, - это как, щелкнув по щелчку сзади, заставить его двигаться вперед, то есть фокусироваться?

Есть ли способ увеличить z-индекс отдельного popover, чтобы переместить его вперед вручную?

Спасибо.

Edit:

мне удалось создать скрипку, используя предложенный ответ. Проблема заключается в том, что с использованием глобальной переменной он правильно увеличивает z-индекс на наиболее продвинутом поппоре, но после того, как он был перенесен на передний план, я не могу получить доступ к другим, т. Е. Даже щелкнуть позади ... так обработчик клика даже не вызывается. Я думаю, что происходит некоторое расслоение. Например: если вы посмотрите на дочерние узлы и щелкните по одной (ссылка в названии popover), затем нажмите на другую, чтобы полуперекрыть первый открытый, щелкните позади, и он будет двигаться вперед. Нажмите на тот, который уже позади, и ничего не происходит:

jsfiddle.net/Sim1/YME9j/9

Есть ли альтернатива приращения Z-индекс, чтобы принести поповер вперед без ущерба для взаимодействия с теми, которые за этим?

Answer 1

Вы должны быть в состоянии сделать это в click обработчика:

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

Как @AmeliaBR отметил, это не будет действительно работать, если у вас есть более чем один поповер, хотя, как z-index только увеличивается на один. В таком случае вы можете иметь глобальную переменную, которая отслеживает максимум z-index и использует это.