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

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同样的 fiddle 。

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