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并立即显示鼠标位置

1 个答案: