Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create hoverover popups in Rails 3.1

I have been searching for a way to implement a hover-over popup with no luck. Because it is used on so many sites I thought it would be easy to find instructions, but I am wondering if I am missing something basic. I have looked at qTips2 and a few others, but these seem like way more than I need.

I have a Rails 3.1 app and want to display more details when a user hovers over a line in a table. Is this something built into Rails that I am missing, or do I need an add-on?

I sure would appreciate someone pointing me in the right direction.

like image 554
SteveO7 Avatar asked Dec 22 '11 19:12

SteveO7


1 Answers

Use some CSS and Javascript!

Here's an example you can play with: http://jsfiddle.net/cdpZg/

Copying it here, just in case.

HTML:

<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div>I a piece of useless information. No use hovering over me.</div>

CSS:

#popup {
    height: 50px;
    width: 200px;
    text-align: center;
    vertical-align:middle;
    background-color: cornflowerblue;
    color: white;
    display: none;
    padding-top: 8px;
    position: absolute;
}

Javascript:

$(document).ready(function() {
    $('#user').hover(function() {
        $('#popup').show();
    }, function() {
        $('#popup').hide();
    });
});
like image 150
Sergio Tulentsev Avatar answered Oct 11 '22 22:10

Sergio Tulentsev