CSS3 and HTML5 Hover Popup Box

Question

Hi all I am currently trying to develop an HTML5 and CSS3 website. What I want to be able to do is when a user hovers over an input area of the website I want to be able to display a little pop up message next to the mouse position to display information to the user.

Is this possible, if not with HTML5 and CSS3 but using something else.

Answer 1

Here is a very simplistic solution I use as a base with my forms.

<style>
.help {
    background-color: #FFFF73;
    border-radius: 10px;
    display: none;
    opacity: 0.9;
    padding: 10px;
    z-index: 100;
}

.help_link:hover + span {
    display: inline;
}
</style>

<form>
    <label>Input: <input type="text" name="text" /></label> <a href="#" class="help_link">Help</a> <span class="help">Some help here on this input field.</span><br />
    <label>Input: <input type="text" name="text2" /></label> <a href="#" class="help_link">Help</a> <span class="help">Some help here on this input field.</span><br />
</form>

The usual disclaimers apply: this is a base, will not work in IE without an external library to add advanced selectors, border-radius not supported in Firefox 3.5, etc.

Answer 2

<input type="text" title="info for user here"/>

You can hover over an input text field and the title will allow a tool-tip type message pop up.