Intro.js in an iframe

Question

I wanted it to work in an Iframe but if I define the js. in the parent document it does not recognize the elements that should be "introduced" inside the iframe. If I use it inside the iframe the effect is not what I expect (the overlay covers only the iframe).

[Intro.js being used inside an iframe.png] https://dl.dropboxusercontent.com/u/6421243/Intro.js%20being%20used%20inside%20an%20iframe.png

Is there something I can do with the plugin code so that it searches the elements inside an iframe but still shows the overlay over the parent?

UPDATE: I would like the black overlay over the WHOLE page (so the border of the iframe would also be covered by it).

Answer 1

Run intro.js in both iFrame and the parent.

In the parent, remove the toolTip and just highlight the iframe

In the iframe, run whatever toolTips you need

To communication between the two, have a look at this: How to communicate between iframe and the parent site?

Answer 2

First of all you should know that if you define your JavaScript codes outside of iframe, it's no longer available in the inner iframe because you don't have access to them.

So, you should put your codes inside the iframe only.

Update: So I think you put the container element wrongly so the IntroJs define the overlay wrong wrongly too. Update and change your element container and then you will don't have any problem with that.