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
http://www.codelifter.com/main/javascript/capturemouseposition1.html,
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
http://www.codelifter.com/main/javascript/capturemouseposition1.html,
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.