Using qtip should disappear when lost focus

Question

I am writing web site, and using qtip:

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.

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

Here is my code (javascript side, which I have problem on it, since tooltip sometimes doesn't disapeared - why?)

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');
}

And on the html side: ...

The tooltip sometimes doesn't hide, and I see several tooltip, which is very annoying behaviour - What may be the reason for that?

Thanks :)

Answer 1

Qtip hide and show option is available which can be mentioned as a option.

HTML:

<fieldset>
    <legend>Validating a complete form</legend>
    <p>
        <label for="firstname">Firstname</label>
        <input type="text" class="show-tip" message="This is Firstname Field" name="firstname" id="firstname">
    </p>
    <p>
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </p>
    <p>
        <label for="email">Email</label>
        <input type="email" name="email" id="email">
    </p>
    <p>
        <label for="agree">Please agree to our policy</label>
        <input type="checkbox" name="agree" id="agree" class="checkbox">
    </p>
    <p>
        <label for="newsletter">I'd like to receive the newsletter</label>
        <input type="radio" name="gender" id="male" class="radio">
    </p>
    <p>
        <input type="submit" value="Submit" class="submit">
    </p>
</fieldset>

Code:

$(document).ready(function () {
  var tipOptions =    {
      content: 'Some basic content for the tooltip',
      show: 'focus',
      hide: { 
        when: {
          event: 'unfocus'
        }
      }
   };
  $('input[type=text]').qtip(tipOptions);
  $('input[type=password]').qtip(tipOptions);
  $('input[type=email]').qtip(tipOptions);
  $('input[type=checkbox]').qtip(tipOptions);
  $('input[type=radio]').qtip(tipOptions);

  $('input[type=checkbox]').mouseover(function(){
      $('input[type=checkbox]').qtip('show');
  });
  $('input[type=checkbox]').mouseout(function(){
      $('input[type=checkbox]').qtip('hide');
  });

  $('input[type=radio]').mouseover(function(){
      $('input[type=radio]').qtip('show');
  });
  $('input[type=radio]').mouseout(function(){
      $('input[type=radio]').qtip('hide');
  });
});

Demo shared in JS Fiddle Reference

Updated - 23rd Dec 2016

Working Example with qTip2 in Single line.

 var tipOptions = {
      content: 'Some basic content for the tooltip',
      show: 'focus',
      hide: { 
        when: {
          event: 'unfocus'
        }
      }
   };

  $('input').qtip(tipOptions);
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css" />

<fieldset>
  <legend>Validating a complete form</legend>
  <p>
    <label for="firstname">Firstname</label>
    <input type="text" class="show-tip" message="This is Firstname Field" name="firstname" id="firstname">
  </p>
  <p>
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
  </p>
  <p>
    <label for="email">Email</label>
    <input type="email" name="email" id="email">
  </p>
  <p>
    <label for="agree">Please agree to our policy</label>
    <input type="checkbox" name="agree" id="agree" class="checkbox">
  </p>
  <p>
    <label for="newsletter">I'd like to receive the newsletter</label>
    <input type="radio" name="gender" id="male" class="radio">
  </p>
  <p>
    <input type="submit" value="Submit" class="submit">
  </p>
</fieldset>