text display on mouse over field

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>

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 />