text display on mouse over field

Asked 2/12, 2014 at 11:19 Answered 22/10, 2020 at 16:32

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>

Heigl answered 2/12, 2014 at 11:19 Comment(3)

add that text as title attribute to the field. <INPUT TYPE="TEXT " NAME ="TYPE" titel="manager or customer"> – Micromho 2/12, 2014 at 11:22

why don't you make your Type input field a select (dropdown) with two options manager and customer. However it is relatively easy to do what you want. – Fritzsche 2/12, 2014 at 11:22

select seems best, you could also add a placeholder attribute – Gitlow 2/12, 2014 at 11:25

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

Silverside answered 2/12, 2014 at 11:31 Comment(2)

downvoter: care to reason? anything wrong here? anything incorrect? does it not answer the question? why is this not useful? – Silverside 2/12, 2014 at 13:3

It was Praveen. – Brioche 23/7, 2021 at 21:29

Use the title attribute!

<input type="text"  name="type" title="Manager or customer" />

Adherence answered 2/12, 2014 at 11:29 Comment(1)

Exactly what i was looking for – Abaddon 25/10, 2020 at 11:8

You can achieve this by using the title attribute:

<input type="text"  name="type" title="Manager or customer">

Fridell answered 2/12, 2014 at 11:25 Comment(0)

If you want to show it on mouse enter you can add following code

$("#type").mouseenter(function(){
    $(".textdis").show();
});
$("#type").mouseleave(function(){
    $(".textdis").hide();
});

Add it to your html

 <p class="textdis">Manager or customer</p>

Check it on this http://jsfiddle.net/nikkirs/6jh944fn/5/

If you wish to display it in textbox then you can use placeholder="Manager or customer" in input field

Centre answered 2/12, 2014 at 12:2 Comment(0)

You can use this one single line <div title="Hey show me the !!">hover me</div>

Auditory answered 22/10, 2020 at 16:32 Comment(1)

Thanks for the answer but I'm not sure I understand how this adds anything to the existing ones that suggest using the title attribute here, here and here. Can you elaborate? – Calx 22/10, 2020 at 17:43

Recommended topics

Hot tags