Question

我有一个带圆圈线的SVG，每次你点击一个圆圈我想要弹出一个直接出现在圆圈下方的箭头，如工具提示，

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

我目前正在使用jquery ui position实用程序。

这是代码

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

jquery show div svg circle

1 个答案: