qTip2 within an iFrame

I a开发者_运维问答m using jQuery qTip2 within an iframe but since I am restricted to the size of the iframe width and height, is there anyway I could have the content actually appear on top of the iframe, i.e. within the parent window of the iframe and not within the actual iframe itself?

In this way, I am not restricted within the iframe size.

This is the current code that I am using as part of the iframe:

$(document).ready(function() {
   $('img[title]').qtip({
         content: {
            text: false, // Use each elements title attribute
            title: {
              text: 'Error',
              button: 'Close'
            }
         },
         hide: {
           event: false
         },
         style: {
            classes: 'ui-tooltip-dark ui-tooltip-rounded',
            height: 5,
            width: 500
         },
         position: {
            my: 'bottom right',
            at: 'top left'
         }
   });
});

Craig posted a link in response to your same post in the qTip2 forums which answers your question:

http://craigsworks.com/projects/forums/thread-solved-qtip-in-iframe-and-mouse-tracking

From reading the discussion, the short answer is that you'll have to initialize the qTips from the parent document, which jQuery makes easy. The hard part of that is that the you'll have to deal with the same origin policy of Javascript. In other words, both documents must come from the same domain. If not, you're out of luck.

One other caveat is that you'll have to manually adjust the qTip positioning since you're initializing from the parent document.

Here's a working example:

http://fiddle.jshell.net/4QDcz/1/

$(document).ready(function () {

    $('#theFrame').contents().find('.selector').qtip({
        position: {
            adjust: {
                x: $('#theFrame').offset().left,
                y: $('#theFrame').offset().top
            }
        }
     });

});

I am wondering if setting the view port will solve your problem. something like this:

position: {
             my: 'top center',  // Position my top left...
             at: 'bottom center', // at the bottom right of...
             viewport: $(window)
          },