How to add tooltip in html?

Question

I have the following code, but it doesn't work, can anyone help me out

<form id="myform" action="#">

  <h3>Registration Form</h3>

  <div id="inputs">

    <!-- username -->
    <label for="username">Username</label>
    <input id="username" title="Must be at least 8 characters."/>
    <br />

    <!-- password -->
    <label for="password">Password</label>
    <input id="password" type="password" title="Make it hard to guess." />
    <br />

    <!-- email -->
    <label for="email">Email</label>
    <input id="email" title="We won't send you any marketing material." />
    <br />

    <!-- message -->
    <label for="body">Message</label>
    <textarea id="body" title="What's on your mind?"></textarea>
    <br />

    <!-- message -->
    <label for="where">Select one</label>
    <select id="where" title="Select one of these options">
      <option>-- first option --</option>
      <option>-- second option --</option>
      <option>-- third option --</option>
    </select>
    <br />
  </div>

  <!-- email -->
  <label>
    I accept the terms and conditions
    <input type="checkbox" id="check" title="Required to proceed" />
  </label>

  <p>
    <button type="button" title="This button won't do anything">
      Proceed
    </button>
  </p>

</form>

Answer 1

title attribute does the work.

Your code works in chrome, FF and IE 9 and 10

Answer 2

Why not use placeholder instead of title.

Supported overview

In other browsers you can use this javascript:

<script>
  var doc = document;
  var inputs = doc.getElementsByTagName('input'),
  var supportPlaceholder = 'placeholder' in doc.createElement('input');

  var placeholder = function(input) {
    var text = input.getAttribute('placeholder');
    var defaultValue = input.defaultValue;

    input.value = text;
    input.onfocus = function() {
      if (input.value === defaultValue || input.value === text) {
        this.value = '';
      }
    }
    input.onblur = function() {
      if (input.value === '') {
        this.value = text;
      }
    }
  };

  if (!supportPlaceholder) {
    for (var i = 0, len = inputs.length; i < len; i++) {
      var input = inputs[i], text = input.getAttribute('placeholder');
      if (input.type === 'text' && text) {
        placeholder(input);
      }
    }
  }
</script>