Rails meets jQuery: Popup-laatikko

Olen opetellut vähän jQueryn alkeita ja koittanut keksiä, miten voisin kokeilla sitä applikaatiossani. Keksinkin sitten, että sen sijaan että projektilistauksessa (index-sivulla) yhtenä sarakkeena on "kuvaus", kuvausteksti voisi tulla näkyviin, kun käyttäjä laittaa hiiren projektin nimen päälle.

Sen sain aikaan näin:

projects.js

$( document ).ready(function() {
    $(this).on('mouseover', '.table-link', function () {
        var shortDescBox = $(this).closest('.projecttitle').find('#shortdesc-box');
        shortDescBox.text($(this).data('shortdesc'));
        shortDescBox.slideDown();
    });
    $(this).on('mouseleave', '.table-link', function () {
        $(this).closest('.projecttitle').find('#shortdesc-box').slideUp();
    });
});

index.html.erb

...
<% @projects.each do |project| %>
  <tr>
    <td class="projecttitle"><%= link_to project.title, project_path(project), :class => "table-link", :'data-shortdesc' => project.description %><div id="shortdesc-box"></div></td>
    <td><%= project.goals.count %></td>
...

main.css

#shortdesc-box {
    background-color: white;
    border: 1px solid black;
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 0.9em;
    max-width: 200px;
    padding: 10px;
    display: none;
    z-index: 1;
    -moz-border-radius-bottomright: 30px;
    -webkit-border-bottom-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

Itse jQueryn otin appikseen mukaan näin:

application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>