Использование QTIP должны исчезнуть, когда потерял фокус

Question

Я пишу веб-сайт, а также с помощью qtip:

Я хочу, что при фокусировке на поле (HTML-элемент) Я вижу подсказку на каждом фокусе, и при потере фокуса - всплывающая подсказка исчезнет.

Существует два вида элементов html. ввод (если есть фокуса). радио (когда нет фокуса, и просто мышь должна показать всплывающую подсказку).

Вот мой код (на стороне JavaScript, который у меня есть проблемы с этим, так как подсказка иногда не disapeared - почему?)

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

И на HTML стороне: ...

Подсказка иногда не скрывает, и я вижу несколько подсказок, которые очень раздражают поведение. Что может быть причиной этого?

спасибо :)

Answer 1

QTIP скрыть и показать опция доступна, которые могут быть упомянуты в качестве опции.

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> 

Код:

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

Демо разделял JS Fiddle Reference

Обновлено - 23-Дек-2016

Рабочая EXA mple с qTip2 в одной строке.

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>