I'm trying to implement this in my Ruby on Rails application. The only thing what doesn't work is the Javascript code. I already tried %script and :javascript. But for some reason it doesn't load. When I hover over the radio button it doesn't show anything.
Javascript/jQuery:
$(document).ready(function(){
$('#container').on('mouseenter', '#radiobtn', showBox);
$('#container').on('mouseleave', '#radiobtn', hideBox);
function showBox(e){
var x = e.pageX + 20;
var y = e.pageY + 20;
$('#hoverbox').fadeIn();
$('#hoverbox').offset({ left: x, top: y });
}
});
function hideBox(){
$('#hoverbox').fadeOut();
}
HTML:
<div id="container">
<input type="radio" id="radiobtn"/>Hi
<div id="hoverbox">This is a hover box</div>
</div>
CSS:
#hoverbox{
display:none;
width:200px;
height:200px;
color:#000;
background-image: url(http://www.w3schools.com/css/paris.jpg);
position:absolute;
}
Example: http://jsfiddle.net/wrN2u/387/
