JQuery показать ДИВ ниже SVG круга

У меня есть SVG с линией кругов и каждый раз, когда вы щелкаете по кругу я хочу всплывающий появляться непосредственно под круг со стрелкой, как наконечник инструмента,JQuery показать ДИВ ниже SVG круга

Проблемы У меня есть то, что позиционирование подсказки зависит от того, где была нажата мышь, а не по кругу (я хочу, чтобы она появлялась в середине круга).

Я использую утилиту jquery ui position для этого.

Вот код

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

Любая помощь будет принята с благодарностью.

источник

2015-06-03 frankwhitejr

Нам действительно нужно увидеть больше, чем это, что-то, что мы можем запустить как фрагмент стека, или jsfiddle будет лучше. –

hi here you go http://jsfiddle.net/1wp1zLf7/1/ – frankwhitejr

Вы можете получить смещенное положение круга и переместиться в центр круга. – SzybkiSasza

Нет необходимости использовать 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/. Обратите внимание на позиционирование абсолютно и малых настроек положения элемента для отображения в центре круга.

источник

2015-06-03 15:31:09 SzybkiSasza

Спасибо, за это хорошо сработало, мне пришлось минус родительское смещение, чтобы правильно позиционировать его, но после этого выглядело отлично! – frankwhitejr

JQuery показать ДИВ ниже SVG круга

ответ

Смежные вопросы