text display on mouse over field

mani9418 picture mani9418 · Dec 2, 2014 · Viewed 27k times · Source

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.

Answer

Abhitalks picture Abhitalks · Dec 2, 2014

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