title: Display information related to row when mouse hovers over in Ruby on Rails App
body: <p>I'm trying to display information unique to a row in a table whenever a user hovers their mouse over it. I'm getting close to accomplishing this by pulling information from the database and then using erb to put that information in a div however, the problem I'm having is that the same information of 1 row is being displayed for all of them.</p>
  
  <p>I'm using a class for the row and a class for the div that contains the popup. I use jQuery to get mouse movement and also show and hide whenever the mouse hovers over the row.</p>
  
  <pre><code>&lt;div class="popup"&gt;
      &lt;h4&gt;Blah&lt;/h4&gt;
      &lt;% for car in dealership.cars do %&gt;
        &lt;p&gt;
        &lt;%= information about row %&gt;
        &lt;/p&gt;
      &lt;% end %&gt;
    &lt;/div&gt;
  
  
    &lt;tr class="row" data-link="&lt;%= dealership_path(vendor)%&gt;" style="cursor: pointer;"&gt;
       &lt;td&gt;&lt;%= can_link_to :show, vendor, vendor.id, dealership_path(vendor), {} %&gt;&lt;/td&gt;
       &lt;td&gt;
       &lt;/td&gt;
       &lt;td&gt;Blah&lt;/td&gt;
       &lt;td&gt;Blahblah&lt;/td&gt;
       &lt;td&gt;Blah&lt;/td&gt;
    &lt;/tr&gt;
  
  
    &lt;script type="text/javascript"&gt;
      var noteSpans = document.querySelectorAll('.popup');
      $(document).ready(function() {
        $(".row").hover(function() {
          $(".popup").show();
          window.onmousemove = function (e) {
              var x = (e.clientX + 20) + 'px',
                  y = (e.clientY + 20) + 'px';
              for (var i = 0; i &lt; noteSpans.length; i++) {
                  noteSpans[i].style.top = y;
                  noteSpans[i].style.left = x;
              }
          };
      }, function() {
          $(".popup").hide();
      });
      });
  
      $("tr[data-link]").click(function() {
        window.location = $(this).data("link")
      })
    &lt;/script&gt;
  
  .popup {
    width: 25%;
    text-align: center;
    vertical-align:middle;
    background-color: #13a8ac;
    color: white;
    display: none;
    padding: 8px;
    position: fixed;
   }
  </code></pre>