1

I am trying to set up a guided tour of my application using Bootstrap Tour but am having a few issues. Main one being I built my application using node.js and templates. I need to have one of the popovers show on a single page only /dashboard not everything else. Now it would be fine execpt for templates means the div I want it to be on is in the sidebar.html template. Here is my code:

(function(){

var tour = new Tour({
    storage : false,
     steps: [
    {
      element: ".tour-step.tour-step-one",
      placement: "top",
      title: "Welcome to Phantom AM!",
      content: "This tour will guide you through some of the features we'd like to point out.",
    },
    {
      element: ".tour-step.tour-step-two",
      placement: "bottom",
      title: "Quick Tracker",
      content: "These four boxes show a quick look at what you have tracked so far.",
    },
    {
      element: ".tour-step.tour-step-three",
      placement: "bottom",
      title: "Add a manufacturer",
      content: "Start by adding a manufacturer.",
    },
    {
        element: ".tour-step.tour-step-four",
        title: "Title of my step",
        content: "Content of my step",
        path: "/dashboard/it/manufacturer/new"
    },

]
});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

}());

Set three is the one that is causing problems for me. I tried host but maybe I used it wrong.

Kirbytech
  • 634
  • 1
  • 5
  • 18

1 Answers1

-1

I would maybe create something like this:

$('.btn').popover();

$('.btn').on('click', function (e) {
    $('.btn').not(this).popover('hide');
});

Then hide/show this on your dashboard page specifically.

brock fredin
  • 54
  • 1
  • 4