Using JS / jQuery to gracefully degrade tooltips

Hello,
I am working on creating tooltips for my website’s glyphs / icons in the navigation to explain what each item links to.

With some help, I achieved tooltips that work with JS and CSS3 in most modern browsers. However, I am having some trouble getting them to appear in IE 10 and Opera.

I was wondering if there is anything I can do in JS to get the tooltips to ‘gracefully degrade’ or when not supported, still allow for a browser’s default tooltips that show the title attribute on hover to appear.

If anyone could help me achieve this, I would greatly appreciate it.

Here is what I have so far: https://dl.dropbox.com/u/270523/CSS3Tooltips/index.html

Thanks in Advance!

I tried IE 7-9, and the browser default tooltips seem to pop up just fine.

Awesome! Thank you for trying! I thought one had to do something, but I guess not.