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/ .注意绝对定位和对元素位置的小调整以显示在圆的中心。