on click of icon cover the input field with a message

Question

I have an input field like below :

<div class="login-form col-sm-12">
  <div class="input-div"><input type="text" placeholder="DOB"><img src="http://i.imgur.com/Hu83Y0v.png" 
alt="" class="info">
  </div>
</div>

On that icon click, I want a hover message, for example "Input your age here" which completely hovers the input field.

how can I do it?

Here's the fiddle for the same.

You can use tooltrip like this example http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip — Ranjan, Jan 12 '17 at 07:21
@Reeyan I want for click and not on hover. I want my message to hover over the input field so that It becomes unvisible till I click somewhere else. This is sort of for mobile devices where `hover` makes no sense — Suraj, Jan 12 '17 at 07:22
Why don´t you simply set the placeholder of the input to "Input your age here"? Then you dont need the info icon. — Franz Deschler, Jan 12 '17 at 07:30

score 0 · Answer 1 · answered Jan 12 '17 at 07:32

May be something like this

<div id="wrapper">
    <div class="input-div">
      <input type="text" placeholder="DOB" />
      <img src="http://i.imgur.com/Hu83Y0v.png" alt="" class="hover">
      <p class="text">please enter your DOB</p>
    </div>
</div>

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

Ghanshyam Baravaliya · Answer 2 · 2017-01-12T09:05:33.450

0

Try this

$( ".info" )
      .mouseenter(function() {
     var position = $(this).position();
       $(this).after(' <div class="msgShow">Test</div>');
       $('.msgShow').css("left",position.left-100);
       $('.msgShow').css("top",position.top+10);
        $('.msgShow').css('position','absolute');
        $('.msgShow').css('z-index','1000');
      })
      .mouseleave(function() {
         $(this).parent().children(".msgShow").remove();
      });

edited Jan 12 '17 at 09:05

answered Jan 12 '17 at 07:34

Ghanshyam Baravaliya

147
2
11

My trouble is not this, I am able to have it, I want the TEST to come over the text field... – Suraj Jan 12 '17 at 07:38

score 0 · Answer 3 · answered Jan 12 '17 at 08:16

I think this is what you need.

$(".info").on("click", function() {

  var message = ($(this).prev("input").attr("message"));
  var input = $(this).prev("input").offset();
  $(this).parent().find(".popup").remove();
  $(this).prev("input").css({"opacity":0});
  $(this).parent().append("<div class='popup'> " + message + "</div>");
  $('.popup').css({
    "position": "absolute",
    "left": $(this).prev("input").position().left,
    "top": $(this).prev("input").position().top,
    "background-color": "#fff",

  })

  var that = $(this);
  setTimeout(function() {
    that.parent().find(".popup").remove();
    that.prev("input").css({"opacity":1});
  }, 3000)

});

.login-form form .input-div {
  position: relative;
  width: 100%;
  float: left;
}
.login-form form input {
  background-color: #ebf7fa;
  border: 0px;
  font-size: 14px;
  color: #000;
  outline: none;
  border-rad ius: 5px;
  height: 40px;
  line-height: 15px;
  margin-bottom: 10px;
  padding: 0 5px 0 45px;
  width: 100%;
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="login-form col-sm-12">
  <div class="input-div">
    <input type="text" placeholder="DOB" message="Input your age here">
    <img src="http://i.imgur.com/Hu83Y0v.png" alt="" class="info">
  </div>
</div>

@Suraj : put where ? , the solution snippet is as per the requirement correct? I have tried to make solution generic so do add the message attribute in your input — Deep, Jan 12 '17 at 08:21

score 0 · Answer 4 · answered Jan 12 '17 at 08:30

try this span appears over textbox text..

$(document).ready(function() { 



$(".info").next().slideToggle();






mouseenter: function() {
   $(this).next().slideToggle();
},
mouseleave: function() {
   $(this).next().slideToggle();
},
click: function() {
    // Handle click...
}

});});

<div class="input-div"><input type="text" placeholder="DOB"><img src="" Alt="" class="info"/> <span class="span">Enter DOB here</span></div>

  .span{
  position: absolute;
top: 17px;
left: 11px;
transition: right 0.2s;

}

on click of icon cover the input field with a message

4 Answers4