Monday, January 05, 2009

jquery tooltip bug - IE7 bigger fonts - hack

if you are using jquery tooltip plugin to show pop up. you will notice that on IE7, its showing much bigger font size. reason for this internally its using h3 tag which is not changed if you set font-size of overall div on IE7. so you need to explicitly overwrite the h3 style and set the smaller font-size, it works beautifully for both firefox and ie7.
actually this solution is given on following page but its at bottom. one might miss this so trying to give it more focus through my blog.

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
by
Monkeytail
31. January 2008 |23:37 @ Jorn

following is the code.

#tooltip {
font-size:10px;
}

add this in your css
#tooltip.pretty h3 {
font-size:8pt;
}

btw above mentioned code didnt worked for me. i took out pretty and it worked well.

#tooltip h3 {
font-size:8pt;
}

I added font-weight:normal to make it look better. so it becomes

#tooltip h3 {
font-size:8pt;
font-weight:normal;
}

Thanks

2 comments:

Unknown said...

Thanks mate, been battling with this issue and your fix works great!

Thanks again. :-)

Anonymous said...

Thanks! I've been banging my head against the wall trying to figure out why the font size in the jquery-tooltip was larger than my css setting. I had no idea IE7 overrode H3 like that. One line, fixed! Thanks again.