Initialize qtip and immediately show on mouse position

Question

I am trying to initialize a qTip on the click event and display it at the mouse position at the same time (with the same click). I've got so far as to requiring 2 clicks in order to display it, but I would like to make it possible with only 1: http://jsfiddle.net/vpysbc5y/4/

Any brilliant ideas? Thanks.

<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

The problem is that target: 'mouse' (probably) tries to infer the current mouse position. However, outside a click event, this is not possible. Since your qtip will be shown on ready rather than on click then it can't infer the mouse position on its own so you will need to forward it.

Your code should read:

$(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
                    }
                },
         });
     });
});

Example fiddle