Question

I am a programmer in rails and I am trying to create a pop up when a link is hovered.

In my project I am looping through an array and displaying different users (eg user image, user name etc). I want a situation whereby when you put your cursor on the user name (which is a link) a pop-up window will show for only that user.

I searched some other sites and I got some javascript ideas which I placed below. But my problem with the code is that when I place the cursor on one user name (which is a link and has the link div) all the pop-up divs from every other user will show instead of just that user name link.

Please what can I do?

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

html

<%= for update in @updates%>
<div id="link-pop" style="display:none"><%=update.user_type%></div> 
<div id="content">
<%= update.user_name%>
</div>
<%end%>

Answer 1

All the pop-up divs from every other user will show instead of just that user name link.

Well, this is because you’re calling all popups $('div#pop-up').show();.
If you need to only show a popup relative to that link you can either select it by index() or if it’s children of #link then something like $(this).find('#popup') will work.