Question

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?

Answer 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();
        });
  });