Search code examples
javascriptjqueryhtmlobjectqtip

Get element that called qTip?


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


Solution

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