If you hover over the “New to Freebaby” box, you will see a nice red tooltip effect, this only works in firefox?
Can anyone help me find out why it does not work in IE? This is the JavaScript:
<script type="text/javascript">
$(document).ready(function() {
//Select all anchor tag with rel set to tooltip
$('a[rel=tooltip]').mouseover(function(e) {
//Grab the title attribute's value and assign it to a variable
var tip = $(this).attr('title');
//Remove the title attribute's to avoid the native tooltip from the browser
$(this).attr('title','');
//Append the tooltip template and its value
$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');
//Set the X and Y axis of the tooltip
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
//Show the tooltip with faceIn effect
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.8);
}).mousemove(function(e) {
//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
}).mouseout(function() {
//Put back the title attribute's value
$(this).attr('title',$('.tipBody').html());
//Remove the appended tooltip template
$(this).children('div#tooltip').remove();
});
});
</script>
And place your mouse over it works both in IE, and Firefox. But i need to apply a margin top or something to push it down but it doesn’t seem to work… Otherwise you can’t really view it…
There are few javascript errors, if you fix those errors. Some problem in DOCTYPE line also. After fixing those problems, i think your problem will automatically solved.
In your validation.js you are trying to get an element by using “this.textboxId”. Which references a node. The problem is that your page has not yet loaded so it cannot find that specific node.
You need to wrap it in the $(document).ready(function() {});
I don’t understand why you have loaded jquery twice.
Actually, billy_111, it shouldn’t unconditionally go downwards. It should check the available space, and if there’s space to make it go downwards, then fine. Else, make it go upwards. Because if your image is located low on the user’s screen (quite possible on netbooks), then the rollover will be mostly hidden and users will be confused about how to see it all (I watch users, and I know how easily they get confused).
Think of how popup mennus (right-click menus) work. They adjust their position so that they never run off the screen. Your rollover needs to do the same.
I looked at your hover. The problem with it is that I can’t read all the text. The button’s at the edge of the window, and I have to manipulate horizontal scrolling to see part of it.
Perhaps you need a different way of displaying that info.
Here’s a screenshot of my best effort to read it.
By the way, I’m on a netbook (small screen) running Chrome on Linux.
