[KirillSPB]

Всем привет! помогите плизь с скриптом, есть конструкция,

<header>
 <ul>
    <p class="real-show-hint-1">Кнопка 1</p>
    <p class="real-show-hint-2">Кнопка 2</p>
 </ul>
</header>
<div class="item-d 1">
      <div id="real-hint-1">содержимое 1</div>
      <div id="real-hint-2">содержимое 2</div>
</div>
<div class="item-d 2">
      <div id="real-hint-1">содержимое 1</div>
      <div id="real-hint-2">содержимое 2</div>
</div>
<div>
      <svg>
       <a data-hint="#real-hint-1">изображение 1</a>
       <a data-hint="#real-hint-2">изображение 2</a>
      </svg>
</div>

надо что бы по клику кнопки 1 показывалось содержимое 1 из item-d 1 у изображения 1 а из item-d 2 у изображения 2, проблема в том что оно спозициировано на карте SVG по координатам и расположить с помощью css не получаеться.
накопал вот такой скриптик

$(function () {
      $('.real-show-hint').once().on( 'click', function(e) { 
        e = e || window.event;
        e.preventDefault();
        var ypos = $(this).offset().top-270;
        var xpos = $(this).offset().left+150;
        var RealHint =  $(this).data('hint');
        $(RealHint).css('top',ypos);
        $(RealHint).css('left',xpos);
        $(RealHint).toggle('fast'); 
        return; 
        });
    });

но он выводит мое содержимое только к тому по чему кликаешь ну и только одно содержимое. я учусь только, сам не осилю помогите пожалуйста