How to create hoverover popups in Rails 3.1

Question

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.

This isn't a Rails question, but rather a CSS or JavaScript question. — Wizard of Ogz, Dec 22 '11 at 19:53
Ha! javascript and css tags were added before I could get to it. — Wizard of Ogz, Dec 22 '11 at 19:54
We'll need a bit more explanation: 1) what do you mean with 'hover-over popup' (just the default browser tooltip, a styleable multiline div,...?) 2) what does your table html look like, and what items should trigger the mouseover? — ptriek, Dec 22 '11 at 19:59
This should be marked as a duplicate of e.g. https://stackoverflow.com/questions/3559467/description-box-using-onmouseover, https://stackoverflow.com/questions/18359193/plain-javascript-tooltip or https://stackoverflow.com/questions/11683620/how-to-display-pop-up-text-on-mouse-hover. The currently shown duplicate has been deleted. — Ilmari Karonen, Jul 16 '19 at 16:55

Sergio Tulentsev · Accepted Answer · 2011-12-23T22:05:54.923

11

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();
    });
});

edited Dec 23 '11 at 22:05

answered Dec 22 '11 at 19:58

Sergio Tulentsev

226,338
43
373
367

Thanks Sergi, For the benefit of anyone else... To get this to work in my Rails 3.1 app, I had to surrond the Javascript with `$(document).ready(function(){ "javascript goes here" });` – SteveO7 Dec 23 '11 at 22:02
@SteveO7 yeah, that's kinda basic stuff. I'll update my answer, just in case :-) – Sergio Tulentsev Dec 23 '11 at 22:04
2

Sometimes that basic stuff can cost you a lot of time! Thanks again – SteveO7 Dec 23 '11 at 22:06
Good luck with your project :-) – Sergio Tulentsev Dec 23 '11 at 22:08

score 7 · Answer 2 · answered Dec 22 '11 at 19:52

7

Just set the title on your link like this

<a title="Some text that will show up when I hover over this link">My link</a>

answered Dec 22 '11 at 19:52

Bassam Mehanni

14,796
2
33
41

1

I had no idea it was that simple... I've lead a sheltered desktop life and just getting into Rails development. Thanks! – SteveO7 Dec 22 '11 at 20:11
@SteveO7 no problem, if it did work out for you please mark your question as answered for future reference, glad I can help – Bassam Mehanni Dec 22 '11 at 20:13
Bassam, Is there a way to do this on a non link? What I want to use it on is a "" in a table. – SteveO7 Dec 22 '11 at 21:42
@SteveO7 yes you should be able to, here is a link where you can read more about it, http://www.w3schools.com/tags/att_standard_title.asp – Bassam Mehanni Dec 22 '11 at 22:01
Any HTML Tag like
Some Text
– sms Mar 07 '15 at 04:56

How to create hoverover popups in Rails 3.1

2 Answers2