Question

I would like to get the element that called the qtip popup. In the documentation here it lets you set the position. I want to set the position using a jquery selector like $(this).find('.icon'). The problem is that this isn’t the element that called the qtip (I think it’s window).

Does anyone know how I can get the handle that called it (like it would if I set target to false)?

Thanks.

In the qtip source code I found this:
if(config.position.target === false) config.position.target = $(this);

Answer 1

Here’s the solution I came up with and it seems to work. There probably is a better way to do it if I modified the qtip script but I want to leave that alone.

$(".report-error").qtip(
{
    content: 'test content',
    position:
    {
        adjust:
        {
            screen: true
        },
        target: false, //it is changed in the 'beforeRender' part in api section. by leaving it as false here in the qtip it will set it as the position I need using $(this)
        corner:
        {
            target: 'bottomMiddle',
            tooltip: 'topRight'
        }
    },
    show:
    {
        when:
        {
            event: 'click'    
        }
    },
    style:
    { 
        name: 'cream',
        tip:
        {
            corner: 'topRight'
        },
        padding: 0,
        width: 400,
        border:
        {
            radius: 5,
            width: 0
        }
    },
    hide:
    {
        when:
        {
            event: 'unfocus'
        }
    },
    api:
    {
        beforeRender: function() { //get the position that qtip found with $(this) in it's script and change it using that as the start position

            this.options.position.target = $(this.elements.target).find('.icon');
            this.elements.target = this.options.position.target; //update this as well. I don't actually know what it's use is
        }
    }
});

It’s working on the site now at http://wncba.co.uk/results/