jquery tooltip

I have a simple form fields on my page that I am trying to turn into a tooltip.
I used to have the code in javascript, and I want to switch it to jquery.
The css is all set up.
The code looks like this:

<p>
                        <label for="Address" id="AddressLabel" >Address &amp; apt*</label>
						<input name="Address" type="text" id="Address"  title="address" maxlength="50"  x-autocompletetype="street-address"/>
					<span class="hint">Tax receipts are mailed here.<span class="hint-pointer">&nbsp;</span></span>
</p>

How can i make a standard code that will work for all fields on my page.
All I want is when someone puts their cursor in the input field, if there is a span with class hint, then .hint  should display inline, when you move out of the field,  change class="hint" to display:none;

This is what is was in javascript, but doesn't work anymore:

	var inputs = document.getElementsByTagName("input");
	for (var i=0; i<inputs.length; i++){
		// test to see if the hint span exists first
		if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
			// the span exists!  on focus, show the hint
			inputs[i].onfocus = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
			}
			// when the cursor moves away from the field, hide the hint
			inputs[i].onblur = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "none";
			}
		}
	}

You can see it on my page, here is works: http://www.kars4kids.org/donate_car_small.asp
here it doesn't:
http://www.kars4kids.org/donate_car.asp