z-index can't be relied on to bring elements to front

[mindjuice]

If your HTML places elements into stacking contexts, and you want to highlight an element whose parent has a z-index, it seems to be impossible for the joyride elements to be brought to front. See this article for a description of why:

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

The effect is that your chosen element, and the joyride popover, are behind the curtain and you cannot interact with them.

This is not a "bug" in ng-joyride, as such, but more just the way z-index works. It does prevent me from using joyride though, as my stacking context needs to be the way it is.

An alternative would be to avoid bringing the target element to the front and instead just use its bounding rectangle to create an SVG shape with a hole in it for the curtain and then put the joyride elements above that. I may take a stab at that in the new year if nobody else has looked at it then.

You could also add a margin to the bounding rectangle (make it bigger to show some context) or add rounded corners, or even use a circle or ellipse as the cutout shape.

[mindjuice]

Also, take a look at how Angular Intro does it. They use some CSS tricks to make it look like the element is cut out. All elements are appended to the end though, not inline, so they are in their own stacking context and can always appear on top.

Click the Demo button on the following page and then take a look at the elements added to the end of the HTML:

http://code.mendhak.com/angular-intro.js/example/index.html

I've integrated Angular Intro now and it is working well.

[abhikmitra]

Yes this is an issue. Thanks for bringing it up. Will look at it

[evanpratama]

+1

would love to have this, as some tour steps for my project is hidden underneath other layer.

[pratikfromaspire]

I fixed the issue in plugin.

Just need to modify generate method.
function generate() {
$fkEl = $(this.selector);
_highlightElement.call(this);
handleClicksOnElement();
this.addClassToCurtain(this.curtainClass);
var ngCurtain = $('#ng-curtain');
if (ngCurtain) {
ngCurtain.remove();
}
$fkEl.after('

');
return _generateHtml.call(this).then(angular.bind(this, _generatePopover)).then(angular.bind(this, _showTooltip));
}

[jscti]

+1 this issue.

@pratikfromaspire : code bugged, and it seems only to remove the curtain. No need fo JS do to that, a simple "#ng-curtain {display:none}" would do it.

[jscti]

After a little effort ,the solution is quite simple : Twittr Bootstrap's Popover has a "container" option that can be bound to "body" for example. That force the popover HTML to be bound to a specific container and not to be lost in a deep HTML tree (with z-index issues)

So, for this joyride lib, the solution is to add "container: 'body'" in the _generatePopover function where the popover gets initialized. Maybe this should be a new settings for ng-joyride

Hope this helps

[kcferguson1]

@Bixibu can you provide some more example here ... i am facing this issue and not sure how to resolve

[jscti]

I said everything already, don't know what to add :

So, for this joyride lib, the solution is to add "container: 'body'" in the _generatePopover function where the popover gets initialized. Maybe this should be a new settings for ng-joyride

You need to manually edit/fork the ng-joyride.js file to add the "container" property to bind your popovers to the right container (body TAG or other)

See : http://getbootstrap.com/javascript/#popovers :
container string | false
Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

[abhikmitra]

can you send a PR ?

[stephengfriend]

+1

I just started using this lib and ran into this issue. Using the container option that @Bixibu pointed out allows my steps to stay on top of the curtain, however, highlighting fails.

[abhikmitra]

I have updated the joyride . Elements now take an optional parameter attachOnBody for this functionality

[Disane87]

@abhikmitra for the popover it works like a charm, but not for the element which is element the popover will open for. Have you any fixes for that?

On other elements its working great.

I guess thats the issue @mindjuice described and has todo with the stacking contexts.
Imho the only good working fix will be the one with svgs.