How to add tooltip in html? - 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>

Answer 3

insert title="" attribute, it will work for you.

Answer 4

Try qTip - http://craigsworks.com/projects/qtip/ and see the demo - http://jsfiddle.net/ramsunvtech/zzZBM/