javascript - jBox.js 工具提示在聚焦的文本框上显示，在未聚焦的文本框上隐藏

Question

当我点击文本框 jbox.js 时显示工具提示，我希望当文本框聚焦时显示工具提示以及当未聚焦时显示工具提示隐藏。

脚本:

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