[Answer]-Is there a way to put python (django) variables into jquery onmouseover popup?

by

1👍

✅

Be carefull, use class instead of IDs on your elements and ensure you select only the sibling popup:

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a.trigger').hover(function(e) {
      $(this).next('.pop-up').show();
        //.css('top', e.pageY + moveDown)
        //.css('left', e.pageX + moveLeft)
        //.appendTo('body');
    }, function() {
      $(this).next('.pop-up').hide();
    });

    $('a.trigger').mousemove(function(e) {
      $(this).next('.pop-up')
        .css('top', e.pageY + moveDown)
        .css('left', e.pageX + moveLeft);
    });
});

{% for person in people %}
<div class="person-container">
  <a href="#" class="trigger"><img src="{{ MEDIA_URL }}/{{ person.avatar }}" /></a>
  <div class="pop-up">
      <h3>{{ person.name }}</h3>
      <p>{{ person.other_info }}</p>
  </div>
</div>
👤noirbizarre

Leave a comment