Question

I am 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 
         }
   });
});

Answer 1

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

});

Answer 2

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)
          },

友情链接