jquery在svg圆下面显示div

Question

我有一个带有一排圆圈的 SVG，每次你点击一个圆圈时，我希望一个弹出窗口直接出现在圆圈下方，并带有类似工具提示的箭头，

我遇到的问题是工具提示的位置取决于鼠标单击的位置，而不是相对于圆圈（我希望它出现在圆圈的中间）。

我目前正在使用 jquery ui 位置实用程序来执行此操作。

这里是代码

thisSeat.click(function(e){ 
    $('#' + seatID).position({
        my: "top",
        at: "center bottom",
        of: e,
        offset: "-8 12",
       collision: "none"
   });
});

任何帮助将不胜感激。

Answer 1

没有必要使用 JQuery UI :) 您可以对点击的圆圈使用偏移量。试试这个：

$("circle").each(function () {
    var seatID = $(this).attr('class');
    $(this).click(function (e) {
        $(".ticket-price").not('#' + seatID).hide();
        $("#" + seatID).show();

        var offset = $(this).offset();
        var popoverWidth = $('#' + seatID).width()

        $('#' + seatID).css(
            {position: 'absolute', 
             top: (offset.top + 20)+'px', 
             left: offset.left - (popoverWidth/2) - 5 + 'px'
            });
    });
});

这是 JSFiddle：http://jsfiddle.net/1wp1zLf7/2/。注意绝对定位和对元素位置的小调整以显示在圆的中心。