Get height and width of element, apply it to tooltip
Hi,
I have some code for creating a tooltip on two different elements on a page.
-
$(document).ready(function() {
$('.h1_a').hover(function() {
$('.h1_a #tooltip').fadeIn('fast');
},
function() {
$('.h1_a #tooltip').fadeOut('fast');
});
$('.p1').hover(function() {
$('.p1 #tooltip').fadeIn('fast');
},
function() {
$('.p1 #tooltip').fadeOut('fast');
});
});
I want it so on hover, #tooltip masks the entire area of an element.
At the moment, I have specified height and width in the CSS which work for the .h1_a element (#tooltip completly masks the area .h1_a takes up). But of course, .p1 has a different height and width, so #tooltip no longer has the right dimensions.
I've looked at the dimensions plugin for jquery (
http://brandonaaron.net/docs/dimensions/#code-samples
) but don't know how to impliment it.
I'm a novice. The above code is the most complicated thing I've done in javascript/jquery as of now.
Any help will be much apprieciated.
J