0

Trying to hide a div after it loses focus or on blur. I have a simple form and am providing some guidelines to users when the focus on the field either by touch or click (this is a site for mobile). It is working as I would like for show, but I have to click on the field again to get the div to hide again.

HTML:

 <input type="text" id="usernameCL" name="usernameCL" placeholder="Create a Username" autocomplete="off" autocorrect="off" class="field_hints"/>
<div id="usernameCL" class="tooltip_static" style="display:none"> This be my field hint</div>

This be my other field hint

JQuery Function using 1.6.4 JQ:

$().ready(function () {
    $('.field_hints').bind('focus',
     function()
     {
       var field = this.id;
       var div = $('.tooltip_static[id='+field+']');

       if(div.css('display') == 'none')
       {
         div.show(function()
         {
           div.slideUp("fast");
         });
       }
      else
      {
        div.hide('blur');
      }
    });
  });

And here is a fiddle: http://jsfiddle.net/LapPA/

Anyone know how to get this to hide on blur or mouse out?

4 Answers 4

2
 $('#myformid').on('blur', '.field_hints',function(){
     $(this).next('.tooltip_static').hide();
 }); //replace #myformid with the id of your form
1

You need a separate handler bound to the blur event.

For example, you could do this:

$().ready(function () {
  $('.field_hints').bind('focus',
    function()
    {
      var field = this.id;
      var div = $('.tooltip_static[id='+field+']');

      if(div.css('display') == 'none')
      {
        div.hide(function()
        {
          div.slideDown("fast");
        });
      }
    }).bind('blur', 
        function()
        {
            var field = this.id;
            var div = $('.tooltip_static[id='+field+']');
            div.hide();
        });
  });
1
  • That actually works pretty well and with iOS Next button on form. Thanks. Feb 4, 2013 at 21:15
1

You can use the mouseleave event: http://jsfiddle.net/4VUvD/

$().ready(function () {
      $('.field_hints').bind('focus', function() {
          var field = this.id;
          var div = $('.tooltip_static[id='+field+']');
          div.slideDown("fast");
      }).bind('mouseleave', function(){
          $('.tooltip_static[id='+this.id+']').slideUp("fast");
      });
});
1
  • That worked good. Some issues with using the Next button on iOS but assume I need to compensate for tab out. Feb 4, 2013 at 21:05
0

First off, you have two objects with the same id usernameCL. This is NOT good.

The code you are searching for:

var func = function () {
    // We assume the id of the input tag to be #someid, and the tooltip div to be #someid_tooltip
    var id = $(this).attr('id');
    $('#' + id + '_tooltip').fadeOut();
};

$('#usernameCL').bind('blur', func);
$('#usernameCL').bind('mouseout', func);

Could be that I messed up a name or two.

3
  • yeah that's my bad. used the wrong id. I'll change it. Basically if you see how this div opens up below our comment box, that is what I am trying to accomplish. Feb 4, 2013 at 21:06
  • Actually I noticed that too and was wondering why it was working since I was re-using the ID. I guess I can try using a class instead. Feb 4, 2013 at 21:15
  • Classes are supposed to be used for assigning similar/same _traits_ to multiple tags. Using them for identification is not a good idea (but it does work if you give care, for example with the other examples using $(this).next()`). That's what ids are for. Feb 4, 2013 at 21:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.