anyone know a good way to do a caption popup on mouseover?

rubyonrails-talk
1

I needed something very simple and flexible, so I put this in my app.html.erb:

<div id="info_bubble"> </div>

this in app.js

function info(obj, msg){   if (msg) {     $('info_bubble').innerHTML = msg;     $('info_bubble').style.top = obj.y + 'px'     $('info_bubble').style.left = 30 + obj.x + 'px'     $('info_bubble').style.visibility = 'visible';   } else { $('info_bubble').style.visibility = 'hidden' } }

this is app.css

#info_bubble {   opacity: .80;   filter: alpha(opacity=80);   position:absolute;   border:1px #333 solid;   visibility:hidden;   font-size:10px;   font-family: verdana;   color:#000;   font-weight:bold;   background:#85a5d6;   padding:5px; }

and added the tag on the object :onMouseOver => "info(this, 'download')", :onMouseOut => "info()"

it worked for me, but I have the bad habit to do everything in house.. :slight_smile:

2

cool thanks i'll test it out this week!

3

Scott Kulik wrote:

cool thanks i'll test it out this week!

i just got it working. i like it because it's so simple but is there anyway to have the popup show up at the mouse pointer instead of a fixed location?

i dont know javascript very well offhand.

also, it looks like it's getting invalid argument on IE7 :frowning:

4

I did not try it on god-damn-IE.. =)

you should modify the js part with code from this example CodeLifter – Coding Hub, the script was originally based on mouse position, but I thought it was annoying.. :slight_smile:

5

Emanuele Tozzato wrote:

I did not try it on god-damn-IE.. =)

you should modify the js part with code from this example CodeLifter – Coding Hub, the script was originally based on mouse position, but I thought it was annoying.. :slight_smile:

hmm...looks like the link is redirecting to their homepage. i'll take a look around the site.