CODEWITHSUNDEEP
jquerycssfocusblur
Sam Skirrow
Sam Skirrow

Reputation: 3697

Make div appear when form field is active

I need to create a div that appears containing tips when a form field is active and disappear when the form field is no longer active. My form fields all have ID's such as #monthly_rent and my tip has a class of .monthly_rent_tip. How can I make it so that it appears and disappears when necessary.

Here is the code I currently have but doesn't work.

<script type="text/javascript">
jQuery(document).ready(function()
   {
        jQuery('.tip.left.monthly_rent_tip').hide(); //hide 
        jQuery('#monthly_rent').focus(function(){  
            jQuery('.tip.left.monthly_rent_tip').show(); //show
        }).blur(function(){  
            jQuery('.tip.left.monthly_rent_tip').hide(); //hide again
        });

  });
</script>

CSS for the tip div is here:

.tip {
position:relative;
padding:15px;
margin:1em 0 3em;
border:5px solid #f18500;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

.monthly_rent_tip {
top:1060px;
left:-130px;
}

Currently this does nothing, can anyone point out the error i'm making please.

Upvotes: 1

Views: 498

Answers (1)

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

checkout this example for your question

http://jquerytools.org/demos/tooltip/form.html

and this is a stackoverflow question for the same topic

JQuery form tooltip

Upvotes: 1

Related Questions