How to navigate through tabs with Bootstrap Tour popovers?

Question

I have multiple popovers I would like to display into different tabs with anchor links and I'm looking for a solution to do that.

I have read the issue #78 in which somebody apparently made it to work using the onShow parameter instead of the redirect but I'm not confortable with these function and I'm unable to make it works.

What I'm doing is using the onNext() and onPrev() function to open the tab with JQuery right before the next (or the previous) popover is displayed.

My problem is that, for example, after the popover element "tour2" is displayed (by clicking Next) the tab #tab3 is correctly displayed but unfortunnatly there is no popover element "tour3".

I noticed that if I load the previous tab and then load the tab #tab3 again the popover element "tour3" suddenly appears.

Any idea what could be wrong with this ?

This is the code I use :

var tour = new Tour({
  name: "tour",
  container: "body",
  smartPlacement: true,
  keyboard: true,
  storage: false,
  steps: [
  {
    element: "#tour1", // this popover is on tab2
    title: "Title here",
    content: "some content here"
  },
  {
    element: "#tour2", // this popover is on tab2
    title: "Title here",
    content: "some content here",
    onNext:function(tour){
                    jQuery('.nav a[href="#tab3"]').tab('show');
                }
  },
  {
    element: "#tour3", // this popover is on tab3
    title: "Title here",
    content: "some content here",
    onPrev:function(tour){
                    jQuery('.nav a[href="#tab2"]').tab('show');
                }
  }
  ]
  });

// Initialize the tour
tour.init();

// Start the tour
tour.start();

Thank you,

score 2 · Accepted Answer · answered Jan 01 '17 at 15:36

After few more research and trys I finally found the answer to my own problem. Hope it will help somebody else.

I was right using the onNext() and the onPrev() to navigate through tabs but the div of the new tab remained hidden and additional JQuery were needed.

The $("").tab('show'); change the display property of my new tab from none to block, then $("").addClass("active"); and $("").removeClass("active"); simply add (or remove) a class in order to make a tab active (or inactive).

Now I must say it works like a charm. This how my code looks like :

var tour = new Tour({
  name: "tour",
  container: "body",
  smartPlacement: true,
  keyboard: true,
  storage: false,
  steps: [
  {
    element: "#tour1",
    title: "Some title here",
    content: "Some content here",
    placement: "right"
  },
  {
    element: "#tour2",
    title: "Some title here",
    content: "Some content here",
    placement: "right"
  },
  {
    element: "#tour3",
    title: "Some title here",
    content: "Some content here",
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(2) a").tab('show');
                    $("div.tab-pane:nth-child(2)").removeClass("active");
                    $("div.tab-pane:nth-child(4)").addClass("active");
                }
  },
  {
    element: "#tour4",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
    onPrev:function(tour){
                    $("div.tab-pane:nth-child(4)").removeClass("active");
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(1) a").tab('show');
                },
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(3) a").tab('show');
                    $("div.tab-pane:nth-child(4)").removeClass("active");
                    $("div.tab-pane:nth-child(6)").addClass("active");
                }
  },
  {
    element: "#tour5",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
    onPrev:function(tour){
                    $("div.tab-pane:nth-child(6)").removeClass("active");
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(2) a").tab('show');
                },
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(4) a").tab('show');
                    $("div.tab-pane:nth-child(6)").removeClass("active");
                    $("div.tab-pane:nth-child(8)").addClass("active");
                }
  },
  {
    element: "#tour6",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
    onPrev:function(tour){
                    $("div.tab-pane:nth-child(8)").removeClass("active");
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(3) a").tab('show');
                },
    onNext:function(tour){
                    $("div.nav:nth-child(2) > ul:nth-child(1) > li:nth-child(4) a").tab('show');
                    $("div.tab-pane:nth-child(6)").removeClass("active");
                    $("div.tab-pane:nth-child(8)").addClass("active");
                }
  },
  {
    element: "#tour7",
    title: "Some title here",
    placement: "right",
    content: "Some content here",
  }
  ]
  });

score 1 · Answer 2 · answered Jul 27 '18 at 18:30

1

onNext:function(tour){
     $("a[href='#tab_3']").click();
}
onPrev:function(tour){
     $("a[href='#tab_1']").click();
}

answered Jul 27 '18 at 18:30

john

11
1

3

Welcome to Stack Overflow! Consider adding some context to your code to help explain what it does and why it answers the question. – R Balasubramanian Jul 27 '18 at 19:08

How to navigate through tabs with Bootstrap Tour popovers?

2 Answers2