初始化 qtip 并立即显示在鼠标位置

Question

我正在尝试在 click 事件上初始化一个 qTip 并同时在鼠标位置显示它（通过相同的单击）。到目前为止，我需要点击 2 次才能显示它，但我只想点击 1 次即可：http://jsfiddle.net/vpysbc5y/4/

有什么好主意吗？谢谢

<div id="block" style="height: 200px; width: 200px; background: black;"></div>

<script>
    $(document).ready(function () {
        $('#block').on('click', function() {
            $(this).qtip({
                content: {
                    text: 'Hello, world!'
                },
                show: {
                    event: 'click',
                },
                hide: {
                    event: 'unfocus',
                    fixed: true
                },
                position: {
                    at: 'top center',
                    my: 'bottom center',
                    target: 'mouse',
                    adjust: {
                        mouse: false
                    }
                },
            });
        });
    });
</script>

Answer 1

问题是 target: 'mouse'（可能）试图推断当前的鼠标位置。但是，在点击事件之外，这是不可能的。由于您的 qtip 将在准备就绪时显示，而不是在单击时显示，因此它无法自行推断鼠标位置，因此您需要转发它。

您的代码应为：

$(document).ready(function () {
    $('#block').on('click', function(e) {
        $(this).qtip({
                content: {
                    text: 'Hello, world!'
                },
                show: {                    
                    ready : true
                },
                hide: {
                    event: 'unfocus',
                    fixed: true
                },
                position: {
                    at: 'top center',
                    my: 'bottom center',
                    target: [ e.clientX, e.clientY ],
                    adjust: {
                        mouse: false
                    }
                },
         });
     });
});

示例fiddle

初始化 qtip 并立即显示在鼠标位置

Initialize qtip and immediately show on mouse position

javascript

jquery

qtip2