2

Demo

Codepen

PRESS FULL SCREEN ICON ON MAP IN CODEPEN TO START TOUR

Desired Outcome

enter image description here

The bootstrap tour element should appear over the top of everything, along with highlighting the element its targeting.

What I'm getting

enter image description here Ignore the difference in red button compared to image above, content doesn't matter

Problem

When the user toggles the fullscreen button (using leaflet fullscreen plugin), it starts the tour.

The tour is activating fine, but the elements of the tour are not responding properly, my hunch is that it is struggling to compete against the fullscreen map for attention at the front as it were.

Currently, the popover isn't displaying, even when in the dev tools I put its z-index as high as it will go. The dark overlay also isn't displaying over the top of the fullscreen map.

Lastly the target is not being highlighted properly. When inspecting the target on other pages with the tour working, it is still the original element, but when inspecting element on this page, it's not the element, but a new bootstrap div placed over the top. No idea why it's not working in the same way.

What I've tried

Tour code 

//Bootstrap tour
function takeTour() {
  console.log("Taking tour");
  ("use strict");
  // Instance the tour
  var tour = new Tour({
    name: "leafletTour",
    storage: false,
    steps: [
      {
        element: "#custom-control",
        title: "One Stop Tour",
        content: "There is only one stop in this tour",
        placement: "right"
      }
    ],
    backdrop: true
  });
  tour.init();
  tour.start(true); 
}

My understanding is that bootstrap tour assigns the target elements new classes as they are selected, which are then set to z-index: 1101

Bootstrap assigning a class, and z-indexing it I have been trying to brute force higher z-index's onto the bootstrap tour elements, but with no luck - no matter how high I set them, they aren't fighting to the top level.

I've also forced the map to be z-index: 100 !important, and still overrides to the top - despite in the dev tools still showing as z-index: 100 !important Any ideas/advice would be great.

Ed Prince
  • 714
  • 2
  • 14
  • 31

1 Answers1

2

I have reviewed your code, its really strange but i have found one solution : Just add class 

.fade{
  opacity:1 !important;
}

Here you can find working example. https://codepen.io/anon/pen/MveMrL

Bhavin Solanki
  • 4,740
  • 3
  • 26
  • 46
  • Don't understand it, but certainly makes the modal display - thanks! The only thing left now is that the target is still being covered by a new div, and not being highlighted – Ed Prince Aug 02 '17 at 12:40
  • I would, but it only solves part of the issue, as the targets are still being hidden. Also, it doesn't work in the full screen mode, which was specifically what my question was asking for. Hadn't realised this before. – Ed Prince Aug 02 '17 at 12:49
  • you have not shown tour on fullscreen, your event on "fullscreenchange" only fire when you exit from fullscreen mode, not on enter fullscreen mode. – Bhavin Solanki Aug 02 '17 at 12:57
  • Line 32 of the codepen, whenever the screen is changed, it has a conditional that checks if the screen is full size, if it is, then it runs takeTour(). If not, then it has been minimized and does nothing. Just added an alert in to prove it is firing when entering full screen. – Ed Prince Aug 02 '17 at 13:04