jQuery qTip - link to a hidden div from inside a tooltip

Question

I am trying to place a link inside a tooltip (qTip) that when clicked shows the content of a hidden div inside a lightbox (nyroModal). Regular anchor tag not in a tooltip links to the div opening content in a lightbox successfully.

Code: http://jsbin.com/omafe/2/

Might need to copy code to notepad, save as html and open the file. (jsbin not loading external js plugin files)

Any help would be greatly appreciated. Thanks.

Answer 1

It appears that qTip is storing a copy of 'div.tipcontent' in memory (a variable).

I discovered this by removing the class "hidden" from the div. When you do this, you'll see that you have two divs. One still on the page and another used by qTip from memory.

As a solution, you may have to modify qTip to apply $('a').nyroModal(); to the link nodes it renders from memory.

EDIT

To add the lightbox effect to your qtip links, modify your qtip initializer as follows:

$('div.tooltip').qtip({
    content: $('div.tipcontent').html(),
    position: {
        corner: {
        target: 'topRight',
        tooltip: 'bottomRight'
        }
    },
    style: { 
        width: 150,
        padding: 10,
        background: 'silver',
        color: 'black',
        tip: 'bottomMiddle',
    },
    hide: {
        fixed: true
    },
    api: {
        onShow: function() { $('a').nyroModal(); }
    }
});

Please note the api call to onShow. This will re-apply the nyroModal to all the links on the page thus covering the dynamically generated content from qtip. There's probably a more efficient way to narrow down the jQuery selector to the specific link generated by qtip, but this should get you started at least.