How to add Bootstrap Tour JavaScript to WordPress Admin Panel Dashboard Widget

Step-1 → Download:

Download the necessary CSS / JS files for Bootstrap Tour in your theme’s directory.

Step-2 → Tour setup script:

Follow the instructions from bootstraptour for the Tour setup script. For example, the following script will load the Tour on the main WordPress Admin Panel Dashboard (on page load) and show the tour for default WP Activity & At a Glance Widgets:

Note: Check the comments inside the CODE for more instructions:

// bootstrap-tour.js file
(function($) {

    var tour = new Tour({
        backdrop: true,
        steps: [
        {   
            element: "#dashboard_right_now",
            title: "Summary Widget.",
            content: "This widget shows the summary of your WP installation."
        },  
        {   
            element: "#dashboard_activity",
            title: "Activity Widget.",
            content: "This is WP Dashboard Activity Widget."
        }]  
    }); 

    tour.init();

    // This will load on each page load or refresh.
    // You may want to change this behaviour according to your need.
    // e.g. show the tour on a click even of a custom notice or button
    // within admin panel dashboard.
    $( window ).load( function() {
        tour.start( true );
    }); 
})( jQuery );

Step-3 → Load the Script in Admin Panel:

Use the admin_enqueue_scripts hook to add the Bootstrap Tour CSS and JS files in the Admin Panel Dashboard like the following CODE in your Theme’s functions.php file:

function wpse308865_bootstrap_tour_enqueue_scripts( $admin_page ) { 
    if ( 'index.php' != $admin_page ) { 
        // so basically we're allowing the tour only on the main dashboard
        // change this if you want it elsewhere as well.
        return;
    }   
    // this is bootstrap tour css and js file inside theme's directory
    wp_register_style( 'bootstrap_tour_css', get_stylesheet_directory_uri() . '/bootstrap-tour-standalone.min.css', false, '1.0' );
    wp_enqueue_style( 'bootstrap_tour_css' );
    wp_enqueue_script( 'bootstrap_tour_js', get_stylesheet_directory_uri() . '/bootstrap-tour-standalone.min.js', array( 'jquery' ), '1.0' );

    // this is the custom bootstrap tour loading script inside theme's directory
    wp_enqueue_script( 'bootstrap_tour', get_stylesheet_directory_uri() . '/bootstrap-tour.js', array( 'bootstrap_tour_js' ), '1.0' );
}   
add_action( 'admin_enqueue_scripts', 'wpse308865_bootstrap_tour_enqueue_scripts' );

---

Note: This is just a demonstration of how to add the CSS & JavaScript CODE of Bootstrap Tour in the WordPress Admin Panel Dashboard from your theme. Obviously you’ll have to adjust the above CODE to fit your need accordingly.