Bootstrap tour Highlight entire dropdown

Question

I am using http://bootstraptour.com/ to highlight features of my application.

I would like to highlight a dropdown and it's contents as a single step in the tour.

I have the following code which highlights the drop-down button and opens the dropdown, but I cannot get it to highlight the drop-down content

var tour = new Tour({
    backdrop: true,
    debug: true,
    storage: false,
    steps: [{
        element: "#step1",
        title: "Settings",
        content: "Content of settings",
        placement: "right",
    }, {
        element: "#dropdownMenu1",
        title: "Title of my step",
        content: "Content of my step",
        placement: "right",
        onShown: function () {
            $("#dropdownMenu1").click();
        }
    }]
});

Any ideas how to highlight the actual dropdown as well?.I created a jsfiddle,any help would be appreciated.

Answer 1

you just need to set the z-index via javascript and donot use .click use .trigger() instead it is faster than .click your code should look like this See Fiddle

$(document).ready(function () {
    // Instance the tour
    var tour = new Tour({
        backdrop: true,
        debug: true,
        storage: false,
        steps: [{
            element: "#step1",
            title: "Settings",
            content: "Content of settings",
            placement: "right",
        }, {
            element: "#dropdownMenu1",
            title: "Title of my step",
            content: "Content of my step",
            placement: "right",
            onShown: function () {
                $("#dropdownMenu1").trigger('click');
                $("#step4").css({
                    zIndex: 10000
                })
            }
        }]
    });

    if (tour.ended()) {
        tour.restart();
    } else {
        tour.init();
        tour.start(true);
    }
});