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

});

Answer 2

我想知道设置视口是否能解决您的问题。像这样的东西：

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

iFrame中的qTip2

2 个答案: