javascript - 失去焦点时使用 qtip 应该会消失

Question

我正在编写网站，并使用 qtip :

我希望当聚焦于字段(一个 html 元素)时，我将在每个焦点上看到一个工具提示，而当失去焦点时 - 工具提示将消失。

html 元素有两种。 输入(当有焦点时)。 单选(当没有焦点时，只需将鼠标悬停在上面即可显示工具提示)。

这是我的代码(javascript 方面，我有问题，因为工具提示有时不会消失 - 为什么？)

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

Updated - 23rd Dec 2016

在单行中使用 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>