jBox.js 工具提示在文本框聚焦时显示，在未聚焦时隐藏

Question

当我在文本框 jbox.js 中单击时显示工具提示，我希望文本框 聚焦时 工具提示显示以及 未聚焦时 [=24] =] 工具提示隐藏。

脚本:

<script type="text/javascript">
$(document).ready(function() {
    $('.tooltip').jBox('Tooltip', {
        trigger: 'click',
        position: {
            x: 'right',
            y: 'center'
        },
        outside: 'x'
    });
});
</script>

HTML 标签:

<input type="text" class="tooltip" autofocus placeholder="First" id="fname" title="Your First Name in Latin" />
<input type="text" class="tooltip" placeholder="Last" id="lname" title="Your Last Name in Latin" />
<span class="lbl">Choose your username</span>
<input type="text" class="tooltip" id="uname" title="You Can Use letters, numbers, dots" />
<span class="lbl lbl_no">Username can't leave this empty.</span>

Answer 1

您将在JQuery中使用对焦和模糊功能。 您需要的代码是：

   <script type='text/javascript'>
    $(document).ready(function() {
        var x = $('.tooltip').jBox('Tooltip', {
            trigger: 'focus',
            animation:{open: 'tada', close: 'flip'},
            position:{
             x:'right',
             y:'center'   
            }, outside:'x'
        });
        $('.tooltip').blur(function() {
            x.close();
        });
    });
</script>