Form Fields Qtip

Form Fields Qtip

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<fieldset>
		<legend>Validating a complete form</legend>
		<p>
			<label for="firstname">Firstname</label>
			<input type="text" class="show-tip" message="This is Firstname Field" name="firstname" id="firstname">
		</p>
		<p>
			<label for="password">Password</label>
			<input type="password" name="password" id="password">
		</p>
		<p>
			<label for="email">Email</label>
			<input type="email" name="email" id="email">
		</p>
		<p>
			<label for="agree">Please agree to our policy</label>
			<input type="checkbox" name="agree" id="agree" class="checkbox">
		</p>
		<p>
			<label for="newsletter">I'd like to receive the newsletter</label>
			<input type="radio" name="gender" id="male" class="radio">
		</p>
		<p>
			<input type="submit" value="Submit" class="submit">
		</p>
	</fieldset>

JavaScript

$(document).ready(function () {
  var tipOptions = {
      content: 'Some basic content for the tooltip',
      show: 'focus',
      hide: { 
        when: {
          event: 'unfocus'
        }
      }
   };
  $('input[type=text]').qtip(tipOptions);
  $('input[type=password]').qtip(tipOptions);
  $('input[type=email]').qtip(tipOptions);
  $('input[type=checkbox]').qtip(tipOptions);
  $('input[type=radio]').qtip(tipOptions);
    
  $('input[type=checkbox]').mouseover(function(){
      $('input[type=checkbox]').qtip('show');
  });
  $('input[type=checkbox]').mouseout(function(){
      $('input[type=checkbox]').qtip('hide');
  });

  $('input[type=radio]').mouseover(function(){
      $('input[type=radio]').qtip('show');
  });
  $('input[type=radio]').mouseout(function(){
      $('input[type=radio]').qtip('hide');
  });
});