bootstrap tour - exemple

        var tour;
        tour = new Tour({
            name: "tour",
            container: "body",
            smartPlacement: true,
            backdrop: "true",
            backdropPadding: 5,
            template: "" +
                "<div class='popover' role='tooltip'>" +
                "<div class='arrow'></div>" +
                "<h3 class='popover-title'></h3>" +
                "<div class='popover-content'></div>" +
                "<div class='popover-navigation'>" +
            "<div class='btn-group'> <button class='btn btn-sm btn-default' data-role='prev'>&laquo; Précédent</button>
            <button class='btn btn-sm btn-default' data-role='next'>Suivant &raquo;</button>
            </div><button class='btn btn-sm btn-default' data-role='end'>Fin du tour</button></div></div>",
                        onStart: function (t) {
                if (!t.ended()) {
                    exemplesCharges = true;
                    GG.ESP.chargerPieceJointeExemple();
                }
            },
            steps: [
                {
                    // Step 0
                    element: ".page-header .label",
                    title: "Nom de votre espace",
                    content: "Bienvenue dans votre espace. Vous retrouverez le nom de votre espace affiché ici.",
                    placement: "bottom"
                },
                {
                    // Step 1
                    element: "#clients-container",
                    title: function () {
                        return $.trim($("#clients-container").siblings("legend").text());
                    },
                    content: function () {
                        return $.trim($("#clients-container").siblings("legend").text()) === "Affectation cliente"
                            ? "Vous retrouvez la liste de tous les clients qui ont accès à cet espace."
                            : "Vos informations personnelles en tant que client ayant accès à cet espace.";
                    },
                    placement: "bottom"
                }
                {
                    // Step 15
                    element: "#timeline-filter",
                    title: "Filtrage de la timeline",
                    content: "Dans le cas où vous souhaiteriez n'afficher que les messages ou que les événements, vous pouvez cliquer sur le bouton correspondant.",
                    placement: "bottom"
                },
            ]
        });
        tour.init();
        tour.start();
        
        
        
            GG.ESP.chargerPieceJointeExemple = function () {
        if ($("#documents-pj .document").length > 0 || requetePjEnCours)
            return;

        requetePjEnCours = true;
        $.post({
            url: xxx,
            data: {
                ID: 0,
                Libelle: "Mon-Document.pdf",
                Date: new Date().toISOString(),
                PersonneNomComplet: "Jean-Luc LE TESTEUR",
                IconeUrl: "pdf",
                PeutSupprimer: true
            },
            success: function (data) {
                $("#documents-pj").prepend(data);
                $("#documents-pj > p").hide();
                requetePjEnCours = false;
            },
            error: function () {
                notifyError();
                requetePjEnCours = false;
            }
        });
    };