Take the 2-minute tour ×

Is it possible to show poshytip from iframe so it is also displaying outside of iframe? Eg. like overflow: visible..

And if not, then how hard would be to display poshytip for parent document and position it relative to my content? What are browser security measures?

NB! Iframe has a fixed height!

Like so:

    |         POSHYTIP           |
    |                            |
    |                            |
    |                            |
|             IFRAME BANNER                                        |
|                                                                  |
|                                                                  |


share|improve this question
I don't think that will be possible, and if I am wrong it will most likely not be a pretty solution. However, is there a reason you cant have your tooltip go down instead of up? Or is there a reason you have to use the iframe at all? –  Josh Mein Sep 6 '12 at 12:12
That depends on banner location. If banner is at top of the page, then i should go down and wen bottom of the page, the it should go up. –  Kristian Sep 6 '12 at 12:14
It's not possible. Think of an iFrame as a separate browser window residing within your document. Cannot be done. –  Kyle Sep 6 '12 at 12:14
Are you just displaying an ad within the iframe? Is there a reason why you have to use an iframe? –  Josh Mein Sep 6 '12 at 12:14
Yes, it goes on othes sites. Think of it as and iframe advertisment. –  Kristian Sep 6 '12 at 12:15

4 Answers 4

up vote 2 down vote accepted

This is not possible. An iFrame is in essence a separate browser window inside document that references other pages. (As you said, it's an advertisement banner module.)

You'll have to place the tooltip to reference the iframe itself if you want a tooltip.

share|improve this answer
But can i do it form iframe? Can i make tooltip referenced to iframe from itself? –  Kristian Sep 6 '12 at 12:25
@Kristian The page that the iframe is displayed on would have to hookup the toolitp to the iframe as a whole, and you will not have access to do that correct? –  Josh Mein Sep 6 '12 at 12:27
Okay, thanks! Leaving the poshytip idea :) –  Kristian Sep 6 '12 at 12:28
jsfiddle.net/rlemon/VGM8q What is wrong with this solution? –  rlemon Sep 6 '12 at 12:44
@rlemon That is what Kyle recommended; however, that does not appear to be possible since this will be an ad on another person's site. You would have to be able to edit the person's site to add a tooltip like this. –  Josh Mein Sep 6 '12 at 13:16

As already mentioned it is impossible to do what you are asking with an iFrame as it is in essence a separate browser. Have you though about changing the looks/reaction of the banner on hover? You could easily change the banner image and show a little information to the user.

Since this is an ad that from what you have said will be on sites you cannot change, you will not have access to change the page the ad is displayed on; therefore, your ad needs to be completely functional in and of itself.

share|improve this answer

Unfortunately, it's not possible.

<iframe> is another separate browser window. It's just a means of 'seeing' inside that web document through your parent document. It's different than a normal in which you can extend elements outside of its margins.

Also, it is considered a security vulnerability for other sites to be able to place content outside their given space.

share|improve this answer

I think it's possible, but it not straightforward and simple. You can modify/extend the plugin that will appending the tooltip element to window.parent.body. Make it position absolute and calculate the position.

Of course it can be done if both frames/iframes not violates same origin policy.

share|improve this answer
It will be an ad that will be on other's sites? How do you recommend he do this? It is not like everyone will want to put a chunk of his code on their site just so an ad can appear correctly periodically. –  Josh Mein Sep 6 '12 at 12:24
@Alex DN: really want to see how you will do that. –  Mark Sep 6 '12 at 12:26
@Mark I already did it in another context...i just used something like $("#mydiv").appendTo($(window.parent.body)); But of course it can work on same domains. In case of external modules it may be more complex (using window.postMessage) and only by agreement of both sides. One side will send messages, and another will process that messages. –  Alex Dn Sep 6 '12 at 12:42

Your Answer


