Search code examples
javascriptjquerydhtmlqtip

How to trigger a pop up using qtip


I have the following qtip code which when a link is clicked produces a popup. Is there a way using jquery I can extract from the code that the link with id equal to "test2" was clicked or not?

Many thanks, James

<ul>
<li><a id="test1" href="">example 1</a></li>
<li class="PopRequired"><a id="test2" href="">example 2</a></li>
<li><a id="test3" href="">example 3</a></li>
<li><a id="test4" href="">example 4</a></li>
</ul>



$('ul li.PopRequired').each(function () {
    $(this).qtip(
    {
        content: {
            text: '<a href="">example text here',
            title: {
                text: true,
                button: '<img src="/images/close_Icon.gif">'
            }
        },
        position: {
            corner: {
                target: 'rightMiddle',
                tooltip: 'leftMiddle'
            },
            adjust: {
                screen: true
            }
        },
        show: {
            when: 'click',
            solo: true
        },
        hide: 'unfocus',
        style: {
            tip: true,
            border: {
                width: 0,
                radius: 4,
            },
            width: 264,
            height: 195,
            title: { 
                background: '#ffffff'
            },
            lineHeight: '16px'
        }
    })
});

Solution

  • You can place a click handler on your a-tags and easily fetch the ID using

     jQuery(this).attr('id')
    

    in order to retrieve the attribute value.

    However, assigning an ID to all your anchor tags might bring limitations, because it may only occur once.

    Perhaps better, you could also store your id/ref using a data- attribute (in your case an ID) along with your element. It will be stored as data-x attribute.

    For instance:

     <a href="#" data-uniqueid="ABC">my link</a>
    

    the ID ABC you can retrieve using $(this).data('uniqueid'); at the moment someone clicked the link.