When I hover on input text field, the hover text should be displayed beside input text field, but in my code the hover text displayed below the input text field. can anyone give me a solution for this. below is my code.

label {
  display: inline-block;
  width: 84px;
}

span#typePrompt {
  display: none;
}

input#userName:hover span#typePrompt {
  display: inline;
}

input#userName:focus span#typePrompt {
  display: inline;
}

<div class="row">
  <div class="col-sm-7 col-md-offset-2 form-group">
    <label class="col-md-6">User Name <span class="star">*</span></label>
    <div class="col-md-6">
      <form:input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
      <span id="typePrompt">Allow only letters</span>
    </div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your code doesn't work because form-control class in bootstrap.
form-control class has width: 100%, and display: block, so the span#typePrompt cannot displayed inline,so it breaks to new line.
I solved it by using d-flex class and w-50 class.

label {
  display: inline-block;
  width: 84px;
}

span#typePrompt {
  display: none;
}

input#userName:hover span#typePrompt {
  display: inline;
}

input#userName:focus span#typePrompt {
  display: inline;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-7 col-md-offset-2 form-group">
    <label class="col-md-6">User Name <span class="star">*</span></label>
    <div class="col-md-6 d-flex">
      <input type="text" class="form-control w-50" path="userName" id="userName" maxlength="100" />
      <span id="typePrompt">Allow only letters</span>
    </div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can wrap input tag and span message text together with display: flex; and on hover then show. The input tag width set as 100% on hover.

Note: I used white-space: nowrap; for don't break the line of message text.

label {
    display: inline-block;
    width: 84px;
}
.input-wrap{
    display: flex;
    align-items: center;
}
.input-wrap:hover input#userName,
.input-wrap input#userName:focus{
    width: 100%;
    display: inline-flex;
    margin-right: 10px;
}
span#typePrompt {
    display: none;
    white-space: nowrap;
}
.input-wrap:hover span#typePrompt,
.input-wrap input#userName:focus span#typePrompt{
    display: inline;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container py-4">
    <div class="row">
        <div class="col-sm-7 col-md-offset-2 form-group">
            <label class="col-md-6">User Name <span class="star">*</span></label>
            <div class="col-md-6">
                <div class="input-wrap">
                    <input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
                    <span id="typePrompt">Allow only letters</span>
                </div>
            </div>
        </div>
    </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I don't know the syntax form:input? Is this a form helper or something? Anyway, I changed that as @ProfessorAbronsius and SatoTakeru had already correctly noted. Then I wrapped the input and label field inside a form tag.

So your code was correct except for the form:input. So my answer is just for the sake of completeness and curiosity what actually form:input is?

label {
  display: inline-block;
  width: 84px;
}

span#typePrompt {
  display: none;
}

input#userName:hover span#typePrompt {
  display: inline;
}

input#userName:focus span#typePrompt {
  display: inline;
}

<form>
<div class="row">
  <div class="col-sm-7 col-md-offset-2 form-group">
    <label class="col-md-6">User Name <span class="star">*</span></label>
    <div class="col-md-6">
      <input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
      <span id="typePrompt">Allow only letters</span>
    </div>
  </div>
</div>
</form>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

There should be a hover attribute. label:hover{}