auf Klick auf Icon decken Sie das Eingabefeld mit einer Meldung

Question

ich ein Eingabefeld wie unten habe:

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

auf dem Symbol klicken, habe ich eine Hover-Nachricht möge, zum Beispiel „Geben Sie Ihr Alter hier“, die vollständig schwebt das Eingabefeld.

wie kann ich es tun?

Here's die Geige für das gleiche.

Answer 1

Kann so etwas wie dieses

<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

Versuchen Sie, diese

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

Answer 3

sein Ich denke, das ist das, was Sie brauchen.

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

versuchen, diese Spanne erscheint über 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; 

}