jquery - iFrame 内的 qTip2

Question

我在 iframe 中使用 jQuery qTip2，但由于我受限于 iframe 宽度和高度的大小，无论如何我可以让内容实际出现在 iframe 顶部，即在 iframe 的父窗口内而不是在实际的 iframe 本身内？

这样我就不受iframe大小的限制了。

这是我当前用作 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 发布了一个链接来回复 your same post in the qTip2 forums这回答了你的问题:

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

通过阅读讨论，简短的答案是您必须从父文档初始化 qTips，jQuery 使这变得很容易。其中最困难的部分是您必须处理 same origin policy JavaScript 的。换句话说，两个文档必须来自同一域。如果没有，那你就不走运了。

另一个需要注意的是，由于您是从父文档进行初始化，因此您必须手动调整 qTip 位置。

这是一个工作示例:

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

$(document).ready(function () {

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

});