title: Using qtip should disappear when lost focus
body: <p>I am writing web site, and using <a href="http://craigsworks.com/projects/qtip/" rel="nofollow">qtip</a>:</p>
  
  <p>I want that when focusing on field (an html element) I shall see a tooltip on each focus, and when loosing focus - the tooltip shall gone.</p>
  
  <p>There are two kind of html element.
  input (when there is focus).
  radio (when there is no focus, and just mouse over should show the tooltip).</p>
  
  <p>Here is my code (javascript side, which I have problem on it, since tooltip sometimes doesn't disapeared - why?) </p>
  
  <pre><code>function showtooltip(item, val, acorner, ahide) {
      'use strict';
      var tipCorner;
      if (ahide === undefined) {
          ahide = 'blur';
      }
  
      if (acorner === undefined) {
          acorner = 'bottomLeft';
      }
  
      if (acorner === "topRight") {
          tipCorner = "leftMiddle";
      } else {
          tipCorner = "topLeft";
      }
  
      setTimeout(function() {
          $(item).qtip({
              content: {
                  text: val
              },
              show: {
                  ready: true
              },
              hide: {
                  when: ahide,
                  delay: 0
              },
              style: {
                  //classes: 'ui-tooltip-jtools',
                  background: '#A2D959',
                  width: 400,
                  color: 'black',
                  border: {
                      width: 1,
                      radius: 3,
                      color: '#6699CC'
                  },
                  tip: { // Now an object instead of a string
                      corner: tipCorner, // We declare our corner within the object using the corner sub-option
                      color: '#6699CC',
                      size: {
                          x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
                          y : 8 // Depending on which corner your tooltip is at, x and y could mean either height or width!
                      }
                  }
              },
              position: {
                  corner: {
                      target: acorner
                  }
              },
              api: {
                  onHide: function() {
                      $(item).qtip('api').destroy();
                  },
                  onShow: function() {
                      setTimeout(function() { $(item).qtip('hide'); }, 2000);
                  }
              }
          });
      }, 0);
  }
  
  function showtooltiph(item, val) {
      'use strict';
      showtooltip(item, val, 'bottomLeft', 'mouseout unfocus');
  }
  </code></pre>
  
  <p>And on the html side:
  ...
  
  </p>
  
  <p><strong>The tooltip sometimes doesn't hide, and I see several tooltip, which is very annoying behaviour - What may be the reason for that?</strong></p>
  
  <p>Thanks :)</p>