Add admin pointers to WordPress dashboard, great for simple plugin/theme onboarding

wp-custom-admin-pointers.php

<?php

class prefixPointers{
	
	// Code adopted from WooCommerce product setup:
	// https://github.com/woocommerce/woocommerce/blob/3.5.1/includes/admin/class-wc-admin-pointers.php
	// For smooth scrolling add html{ scroll-behavior: smooth; } to your admin CSS. 
	// Only equeue CSS on your plugin/theme's admin pages.
	
	public function __construct() {
		add_action( 'admin_enqueue_scripts', array( $this, 'setup_pointer_support' ) );
		add_action( 'admin_print_footer_scripts', array( $this, 'prefix_enqueue_pointers' ) );
	}
	

	public function setup_pointer_support(){
		wp_enqueue_style( 'wp-pointer' );
		wp_enqueue_script( 'wp-pointer' );
	}
	
	/**
	* Tutorial for activating your plugin/theme license after activation
	*
	* @since   x.x.x
	* @access  public
	*/
	public function create_prefix_license_activation_tutorial_first() {
		
		//Run activation pointer for Pro plugin if exists and activation has not run pointer
		if( ! class_exists( 'prefix_Pro' ) || get_option( 'prefix_start_activation' ) ){
			return;
		}
		
		$pointers = array(
			'pointers' => array(
				'settings'          => array(
					'target'       => '#menu-settings',
					'next'         => '',
					'next_trigger' => array(
						'target' => '#menu-settings',
						'event'  => 'click',
					),
					'options'      => array(
						'content'  => '<h3>' . esc_html__( 'Activate Your New Plugin', 'awesome-plugin' ) . '</h3>' .
						'<p>' . esc_html__( 'Click here to start activating Awesome Plugin.', 'awesome-plugin' ) . '</p>',
						'position' => array(
							'edge'  => 'left',
							'align' => 'right',
						),
					),
				),
			),
		);
		
		update_option( 'prefix_start_activation', 1 );
		return $pointers;
	}
	
	/**
	* Tutorial for activating your plugin/theme license after activation.
	*
	* @since   x.x.x
	* @access  public
	*/
	public function create_prefix_license_activation_tutorial_last() {
		
		if ( get_option( 'prefix_end_activation' ) ){
			return;
		};
		
		$pointers = array(
			'pointers' => array(
				'settings'          => array(
					'target'       => '#id',
					'next'         => 'prefix-menu',
					'next_trigger' => array(
						'target' => '#id',
						'event'  => 'click',
					),
					'options'      => array(
						'content'  => '<h3>' . esc_html__( 'Enter License Key', 'awesome-plugin' ) . '</h3>' .
						'<p>' . __( sprintf('Grab your license key from your purchase history %shere%s. Then activate it.', '<a href="#" target="_blank">', '</a>'), 'awesome-plugin' ) . '</p>',
						'position' => array(
							'edge'  => 'left',
							'align' => 'right',
						),
					),
				),
				'prefix-menu'        => array(
					'target'       => '#id',
					'next'         => '',
					'next_trigger' => array(),
					'options'      => array(
						'content'  => '<h3>' . esc_html__( 'Learn How it Works', 'awesome-plugin' ) . '</h3>' .
						'<p>' . esc_html__( 'Then click here to get started with your new plugin.', 'awesome-plugin' ) . '</p>',
						'position' => array(
							'edge'  => 'left',
							'align' => 'right',
						),
					),
				),
			),
		);
		
		update_option( 'prefix_end_activation', 1 );
		return $pointers;
	}
	
	/**
	* Tutorial pointers for personal plan.
	*
	* @since   x.x.x
	* @access  public
	*/
	public function create_prefix_tutorial() {
		
		if( get_option( 'prefix_tutorial_queued' ) ){
			return;
		}
		
		// next_trigger target checks whether or not event has happened on specified #id_1
		$pointers = array(
			'pointers' => array(
				'accounts'          => array(
					'target'       => '#id_1',
					'next'         => 'add-account',
					'next_trigger' => array(
						'target' => '#id_1',
						'event'  => 'click change input',
					),
					'options'      => array(
						'content'  => '<h3>' . esc_html__( 'Accounts Area', 'awesome-plugin' ) . '</h3>' .
						'<p>' . esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', 'awesome-plugin' ) . '</p>',
						'position' => array(
							'edge'  => 'top',
							'align' => 'left',
						),
					),
				),
				'add-account'        => array(
					'target'       => '#id1',
					'next'         => '',
					'next_trigger' => array(),
					'options'      => array(
						'content'  => '<h3>' . esc_html__( 'Adding Accounts', 'awesome-plugin' ) . '</h3>' .
						'<p>' . esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', 'awesome-plugin' ) . '</p>' .
						'<p>' . __( sprintf( '%sNote:%s', '<strong>', '</strong>' ), 'awesome-plugin' ) . '</p>' .
						'<p>' . esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', 'awesome-plugin' ) . '</p>',
						'position' => array(
							'edge'  => 'bottom',
							'align' => 'left',
						),
					),
				),
			),
		);
		
		update_option( 'prefix_tutorial_queued', 1 );
		return $pointers;
	}
	
	/**
	* Enqueus the pointer's scripts.
	*
	* @since   x.x.x
	* @access  public
	*/
	public function prefix_enqueue_pointers() {
		
		if ( ! $screen = get_current_screen() ) {
			return;
		}
		
		switch ( $screen->id ) {
			case 'plugins':
			$pointers = $this->create_prefix_license_activation_tutorial_first();
			break;
			case 'options-general':
			$pointers = $this->create_prefix_license_activation_tutorial_last();
			break;
			case 'prefix_plugin_settings_screen':
			$pointers = $this->create_prefix_tutorial();
			break;
		}
		
		$pointers = wp_json_encode( $pointers );
		
		?>
		<script type="text/javascript">
		jQuery( function( $ ) {
			var prefix_pointer = <?php echo $pointers ?>;
			
			setTimeout( init_prefix_pointer, 800 );
			
			function init_prefix_pointer() {
				$.each( prefix_pointer.pointers, function( i ) {
					show_prefix_pointer( i );
					return false;
				});
			}
			
			function show_prefix_pointer( id ) {
				var pointer = prefix_pointer.pointers[ id ];
				var options = $.extend( pointer.options, {
					pointerClass: 'wp-pointer prefix-pointer',
					close: function() {
						if ( pointer.next ) {
							show_prefix_pointer( pointer.next );
						}
					},
					buttons: function( event, t ) {
						if (pointer.next !== 'min-interval') {
							
							var close   = " <?php echo esc_js( __( 'Dismiss', 'awesome-plugin' ) ) ?>",
							next    = "<?php echo esc_js( __( 'Next', 'awesome-plugin' ) ) ?>",
							
							button  = $( '<a class=\"close\" href=\"#\">' + close + '</a>' ),
							button2 = $( '<a class=\"button button-primary next\" href=\"#\">' + next + '</a>' ),
							wrapper = $( '<div class=\"prefix-pointer-buttons\" />' );
							
							button.bind( 'click.pointer', function(e) {
								e.preventDefault();
								t.element.pointer('destroy');
							});
							
							button2.bind( 'click.pointer', function(e) {
								e.preventDefault();
								t.element.pointer('close');
								
								switch( pointer.next ){
									case 'activate-prefix':
									window.scrollBy(0, 400);
									break;
									case 'prefix-menu':
									window.scrollBy(0, 400);
									break;
									case 'add-account':
									window.scrollBy(0, -400);
									break;
								}
							});
							
							wrapper.append( button );
							wrapper.append( button2 );
							
							return wrapper;
						}
					},
				} );
				
				var this_pointer = $( pointer.target ).pointer( options );
				this_pointer.pointer( 'open' );
				
				if ( pointer.next_trigger ) {
					$( pointer.next_trigger.target ).on( pointer.next_trigger.event, function() {
						setTimeout( function() { this_pointer.pointer( 'close' ); }, 400 );
					});
				}
			}
		});
		</script>
		<?php
		
	}
	
}