2

This is the HTML that my Bootstrap Tour is working on:

<body class="top-navigation">
   <div id="wrapper">
      <div id="page-wrapper">
        <div class="row border-bottom">
          <nav class="navbar navbar-static-top">
             <div class="navbar-header">
               <a href="/">
                 <img class="navbar-brand" alt="image" src="logo.png" />
               </a>
               <form class="navbar-form-custom" action="/profiles" accept-charset="UTF-8" method="get">
                  <input type="text" name="q" id="top-search" class="form-control"/>
               </form>    
             </div>

         <ul class="nav navbar-top-links navbar-right">
              <li>
                <a class="coach-dashboard" href="/dashboard">
                  <i class="fa fa-dashboard"></i> My Dashboard
                </a>              
              </li>
              <li>
                <a class="my-favorites" href="/profiles?filter=favorites">
                    <i class="fa fa-list"></i> My Favorites
                </a>              
              </li>
          <li>
            <a class="settings" href="/users/registration/edit">
              <i class="fa fa-sliders"></i> My Settings
            </a>          
          </li>
         </ul>
        </nav>
       </div>

      <div class="row wrapper border-bottom gray-bg page-heading">
        <h2><span class="num-players">14 Players - Tryouts One 2016</span</h2>
      </div>

  <div class="wrapper wrapper-content">
    <div class="row">
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <div class="contact-box profile-24">
        <a href="/profiles/24">
          <div class="col-lg-offset-1 col-lg-4 col-xs-4">
             <div class="text-center">
                <img alt="image" src="profile-24.jpg" />
                  Age: 30
              </div>
          </div>
          <div class="col-lg-offset-1 col-lg-6 col-xs-8">
              <h3><strong>Jimmy Choos</strong></h3>
              <address>
                 <strong>St. George&#39;s College</strong><br>
                  Grade: <br>
                  Height: N/A<br>
                  Weight: N/A<br>
              </address>
          </div>
          <div class="clearfix"></div>
        </a>
      </div>
  </div>

This is the JS that triggers that the tour:

<script type="text/javascript">
  $(document).on('turbolinks:load', function() {
    var tour = new Tour({
      storage: false,
      backdrop: true,
      steps: [
      {
        element: "div.navbar-header input#top-search",
        title: "Search",
        content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
      },
      {
        element: "div.page-heading h2 span.num-players",
        title: "Number of Players",
        content: "This is the number of players are in our database for this Tournament"
      },
      {
        element: '#page-wrapper div.contact-box.profile-<%= @profiles.first.id %>',
        title: "Player Info",
        content: "Here we have a quick snapshot of the player stats"
      }
    ]});

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
  });
</script>

Here is how the tour looks with the backdrop:

This is rendered correctly: highlighted-element-visible

These two are not rendered correctly with the highlighted element not visible: highlighted-element-not-visible search-bar-element-not-visble

How do I get all of the elements to render like the top one, where the highlighted element is visible?

Edit 1

Here is a JSFiddle that shows the behavior:

https://jsfiddle.net/nrkry27p/

Specifically, pay attention to the 2nd step where it doesn't get highlighted like the search in the demo gets highlighted. Except in my real code, search doesn't get highlighted...but you should be able to get an understanding of what's happening.

Final Edit

After many rounds of edits, constant backing and forthing, we finally figured it out. So, I have decided to clean up all of the edits that don't really add value to understanding the problem and the solution.

marcamillion
  • 32,933
  • 55
  • 189
  • 380

3 Answers3

1

Currently the .tour-step-background element has a background-color:inherit property, which is inheriting transparent from the body. The reason the search element is displaying, is that it defaults to having a background colour of white from the browser.

Try adding a background colour to the .tour-step-background element, or alternatively, set a background-color for your body element. This should "highlight" the step that it's on.

JSFIDDLE

.tour-step-background{
    background-color:#FFF;
}

EDIT

This is still a z-index and background-color issue that you're encountering. Based upon our discussion, it turned out that the supplied JS fiddle did not include the offending CSS from bootstrap regarding the z-index of navbar-fixed-top. Once this was identified, we needed to add some JS and some CSS to fix the problem. The JS applies a class to the body called is-touring when you start touring and removes the class when you end.

Using this class we override the z-index value of navbar-static-top so that we can display its internal elements above the tour display. The onStart and onEnd functions are available in the API reference for bootstrap tour.

CSS

/* ALSO REMOVE THE Z-INDEX VALUE ON THE RULE (line 247) */
.navbar-form-custom .form-contro{}
/* ADD THIS STYLE */
.is-touring .navbar-static-top{ 
    z-index:auto; 
}
/* BEGIN OPTIONAL CSS */
.tour-step-background {
  background-color:#fff;
  z-index: 2101;
}
.tour-step-backdrop{ /* this exists already, so update */
  z-index: 2102;
}
.tour-backdrop {
  z-index: 2100;
  opacity: .7;
}
.popover[class*=tour-] {
  z-index: 2101;
}
/* END OPTIONAL CSS */

JS

var tour = new Tour({
  storage: false,
  backdrop: true,
  onStart: function(){
    $('body').addClass('is-touring');
  },
  onEnd: function(){
    $('body').removeClass('is-touring');
  },
  steps: [
  {
    element: "div.navbar-header img.navbar-brand",
    title: "Go Home",
    content: "Go home to the main page."
  },
    {
    element: "div.navbar-header input#top-search",
    title: "Search",
    content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
  },
  {
    element: "span.num-players",
    title: "Number of Players",
    content: "This is the number of players that are in our database for this Tournament"
  },
  {
    element: '#page-wrapper div.contact-box.profile-24',
    title: "Player Info",
    content: "Here we have a quick snapshot of the player stats"
  }
]});

UPDATED FIDDLE

haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • I agree about the issue being `background-color:inheirt` which inherits transpareny from the `body`. I updated the question to show the styling applied to my `body` tag, including the `background-color`, so I can't set it to `white`, because that will fubar my empire page. I also updated the question with the results of changing the `background-color` of `body` to `#FFF`. – marcamillion Dec 08 '16 at 02:54
  • I added some screenshots of the styles I am seeing in my browser console when the backdrop is activated. Update the question again plz. – marcamillion Dec 08 '16 at 03:32
  • I updated the question with the results from your suggestion. They are `Edit 7`. – marcamillion Dec 08 '16 at 05:02
  • @marcamillion, your search box _has no content_, but _is_ being highlighted, please try clicking into the search box, or adding a `placeholder` or `value` to the input element – haxxxton Dec 08 '16 at 05:04
  • It does have `placeholder` content. This is the input element: ``. Also I get this same behavior on the other elements, like my logo in the top left. – marcamillion Dec 08 '16 at 05:06
  • @marcamillion, it is displaying fine with placeholder content in this fiddle. https://jsfiddle.net/nrkry27p/7/ can you confirm when _NOT_ touring, that you can see your placeholder content? – haxxxton Dec 08 '16 at 05:08
  • Yep. 100% sure. See `Edit 5` which has a screenshot of way the search box and the logo image works outside of the tour execution. – marcamillion Dec 08 '16 at 05:11
  • @marcamillion, can you confirm in this fiddle https://jsfiddle.net/nrkry27p/7/ you are seeing the search box appear as expected during the tour? (if so i would suspect there is a css rule not included in your question that is overriding the settings). could you please then post Edit 7's code with a screenshot of the inspecting of the search input's css – haxxxton Dec 08 '16 at 05:13
  • In that fiddle, I don't see the search box appear during the tour. Do you see it in appear during the tour? – marcamillion Dec 08 '16 at 05:17
  • @marcamillion, i do: first step of tour (can see it in the background) http://imgur.com/1wuC5mi , second step of tour http://imgur.com/wKjzaLJ – haxxxton Dec 08 '16 at 05:19
  • This is what I see for the entire fiddle and the tour: http://imgur.com/a/UvXbg You sure you are looking at the same fiddle you linked me? – marcamillion Dec 08 '16 at 05:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130067/discussion-between-haxxxton-and-marcamillion). – haxxxton Dec 08 '16 at 05:28
1

I've played with your code and found a solution. The thing is it adds a class to your span and hence that does not have a white background you won't get the highlight behaviour. So if you add this in your css:

.num-players.tour-step-backdrop {
  background-color: white;
}

It will work. And for your last one as well:

.contact-box.profile-24.tour-step-backdrop {
  background-color: white;
}

Or you could use a general rule like this: 

.tour-step-backdrop {
    background-color: white;
}

UPDATE:

Based on your screen shot and changing the styles, I realised that you have a lower z-index on the class than the backdrop itself, so changing background alone doesn't help:

.tour-step-backdrop {
    background-color: white;
    z-index: 3100;
}

UPDATE 2:

That class is generic and shouldn't be used alone. I've tried a couple of variations and this seems to be working:

.tour-step-backdrop.tour-tour-element {
   z-index: 4000;
   background-color: white;
 }
Yaser
  • 5,609
  • 1
  • 15
  • 27
  • I guess the one thing I don't particularly like about this is that I have to write a custom style for every single step that it doesn't work. So while this sounds like it could be a solution, it's not as optimal as I would like. I do like the identification of the problem though. – marcamillion Dec 08 '16 at 02:50
  • @marcamillion you can use a general rule for all of the items that get this class since it is added when they are selected as a tour step – Yaser Dec 08 '16 at 03:06
  • Yeh I had tried that, based on @haxxxton's answer, but that doesn't solve it. Check the updated question to see the results of that experiment. What I am trying to do now is to get the JSFiddle to more accurately reflect the my production app. – marcamillion Dec 08 '16 at 03:11
  • I added some screenshots of the styles I am seeing in my browser console when the backdrop is activated. Update the question again plz. – marcamillion Dec 08 '16 at 03:32
  • found out that the z-index is lower than backdrop, hope this will help, see the update @marcamillion – Yaser Dec 08 '16 at 03:40
  • That's a good guess. It still doesn't work. Hang on, I found another weird issue. I am gonna update the question. – marcamillion Dec 08 '16 at 03:59
  • I updated the question, please refresh and see if you see anything else weird. Note that the styles from `bootstrap-tour.css` always supersede those in my stylesheet. Not sure if that is what it is, but I did notice that. – marcamillion Dec 08 '16 at 04:08
  • @marcamillion could you please make sure your stylesheet order is after bootstrap one in the html head or wherever you have the link – Yaser Dec 08 '16 at 04:25
  • I did that, and updated the question with the screenshot. Refresh the question to see. – marcamillion Dec 08 '16 at 04:32
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130064/discussion-between-yaser-adel-mehraban-and-marcamillion). – Yaser Dec 08 '16 at 04:33
1

You must give initial background value to the elements you want to style to because there was no default background style even inherit on both span and h2 elements. It's easy to solve this problem as long as giving both span.num-players and its parent h2 a style is background: inherit. Just append that as following.

h2 { 
  /* Other style */ 
  background: inherit; 
} 

.tour-step-backdrop { 
  /* Other style */ 
  background: inherit; 
}

EDIT

JSFiddle

I commented z-index of .tour-backdrop because it overlaid .tour-step-backdrop element.

.tour-backdrop {
  /* z-index: 2100;  Disable this style. */
  opacity: .7;
}
Anson
  • 489
  • 7
  • 12