单击图标时用消息覆盖输入字段

Question

我有一个如下所示的输入字段：

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

单击该图标时，我想要一条悬停消息，例如“在此处输入您的年龄”，它将完全悬停在输入字段中。

我该怎么做？

Here's 相同的小提琴。

Answer 1

可能是这样的

<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;
}

Answer 2

我想这就是你需要的。

$(".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>

Answer 3

试试这个跨度出现在文本框文本上..

$(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;

}

Answer 4

试试这个

$( ".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();
      });