Displaying Popups on Mouse Hover with jQuery

by Galina Yermicheva, cohort 1 student. Read the original on her blog.

A part of Ada is attending networking events to get to know the Seattle tech community better. I thought it would be great if my classmates could add events like this to a common calendar and the users would be notified via email and have the option to RSVP to events. I decided to work on this project over winter break, and this is how Ada Calendar came to life. The events are displayed as a calendar and when you hover the mouse over the event link you can see information about the event in a popup window. 

To implement the popup in your app you can download the latest version of jQuery and link it to the HTML file or use Google library. In order to do this, the following line should be included in the head of the HTML document:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

The next step is to add a div that will pop up when we hover over the link that serves as a trigger. Here is what the HTML for the example above looks like:

  <a class="popper" href="">Hover Over!!!</a></br>
  <div id="pop">
    <p>I am a popup!</p>
  </div>

We can style the #pop div as we like in a CSS file, but since it should only be visible when the event is triggered, we need to set the display property to none, and the position to absolute to make sure the div is positioned correctly once it’s shown on the page:

#pop{
    display              : none;
    position             : absolute;
    z-index              : 99999;
    padding              : 10px;
    background           : #3AB9AE;
    border               : 1px solid #A2ADBC;
    -moz-border-radius   : 20px;
    -webkit-border-radius: 20px;
    margin               : 0px;
    -webkit-box-shadow   : 0px 0px 5px 0px rgba(164, 164, 164, 1);
    box-shadow           : 0px 0px 5px 0px rgba(164, 164, 164, 1);
}

Lastly, add the following code to your javascript file:

$(function() {
    $('a.popper').hover(function() {
        $('#pop').toggle();
    });
});

With this code when a mouse hovers over the <a> element with the .popper class selector, the"div#pop" is shown. As soon as we move the mouse away from the .popper, the target will be hidden again.