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