Alternative solution not relying on fixParent

[qbolec]

Your current solution heavily depends on the z-index ordering, and needs to "fix parents" in various ways - I found that I need to add more and more rules for fixParent to make it work (recently I had to disable transform etc.) As I understand the path that led to the current solution, it was because the effect of a "dark" background and "light" rounded rectangle surrounding a focused control are easiest to achieve if they are stacked in the order: dark,light,focused.

I was thinking about this for a while and come up with completely different approach which does not rely on z-index : http://jsfiddle.net/t1q5cq9p/ In my solution there is no "light" rounded rectangle at all - instead, the dark background consists of several parts which combined together form a shape with a rounded whole inside of it. These parts are: .left - a rectangle part to the left of the focused element .right - rectangle part to the right of the focused element .top - a screen-wide rectangle above the focused element. .bottom - a screen-wide rectangle below the focused element. .clipper - this is where the magic happens: it contains .rounded which is a transparent rectangle with a dark and sufficiently wide rounded border, clipped to a rectangle size - the final effect is that .clipper looks like a transparent rectangle with opaque dark corners

So in my solution you can simply put .hint in the front layer, that is above the focused element, which can be easily achieved by making sure that it is the last absolutely positioned element in the with 999999 z-order.

My solution handles colors a bit different than yours - it does not make the interior of rounded rectangle lighter (as there is no white rectangle in my solution). Depending on color theme of the site this might be better or worse - certainly it makes creates less contrast. However, I think that having a rock solid solution is far more important than having a particular optical effect.

[afshinm]

Can you please propose a pull request? So I can review it better.

[qbolec]

Unfortunately I've come up with this solution only after rewriting the whole library from scratch. My version is here https://github.com/qbolec/tutorial and it is not compatible with IntroJS, so I can not give you a nice pull request ;(