text display on mouse over field

css, html, text-decorations

Solution

(1) As mentioned in the other answers, best would be to use a `title` attribute:

<input type="text" id="userType" title="Manager or Customer" />

(2) Next best thing is to use `placeholder` attribute, (as mentioned by @Rhumborl in comments):

<input type="text" id="userType" title="Manager or Customer" placeholder="Manager or Customer" />

(3) Alternatively, you could use a `span` following your input and show it by toggling its `display` on `hover` and/or `focus` of your `input`.

Example (showing all three):

label { display: inline-block; width: 84px; }
span#typePrompt { display: none; }
input#userType:hover + span#typePrompt { display: inline; }
input#userType:focus + span#typePrompt { display: inline; }

<label>Username: </label><input type="text" id="userName" /><br />
<label>Password: </label><input type="text" id="userPassword" /><br />
<label>UserType: </label><input type="text" id="userType" placeholder="Manager or Customer"  title="Manager or Customer" />
<span id="typePrompt">Manager or Customer</span>
<br />

Problem

I am making a simple signup form of a website. i need to display a text line saying "manager or customer" It only should appear when i place my mouse on the third field(type) of the form. I am new to these css things. i am sory if my question is odd but i need to do it. ``` <!DOctype html> <html> <head> <style> body{ background: url("2.jpg"); background-size: cover; background-repeat: no-repeat; } div.transbox { width: 400px; height: 360px; margin: 30px 50px; background-color: #ffffff; border: 2px solid; border-radius: 25px; opacity: 0.8; filter: alpha(opacity=60); } span { display: none; border:1px solid #000; height:30px; width:290px; margin-left:10px; } input:hover { background-color: brown; } form:hover{ border-color: green; } h1 { text-align: center; } </style> </head> <center><body> <div class = "transbox"> <form method = POST action = makeaccount.php> <p> <h1>Make Your account Here</h1> <br> <br> USERNAME &nbsp;&nbsp;<INPUT TYPE = TEXT NAME = USERNAME> </p> <p> <BR> USERPASS &nbsp;&nbsp;&nbsp; <INPUT TYPE="password" NAME = USERPASS> </p> <p> <BR> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TYPE &nbsp;&nbsp;&nbsp; <INPUT TYPE= TEXT NAME = TYPE> </p> <br> <BR> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE =submit name="submit" VALUE = "LOGIN"> </p> </form> </div> </body> </center> <br><br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <form action="home.html"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" style="width:100px; height:30px;" value="Back"> </form> </html> ```

Original source