Driver.js

A walkthrough provides a user with a tutorial journey in which they can learn to navigate around the User Interface. Driver.js is included in this template via the Vendor Files.

Go To Documentation

Reference Section

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus a repellat deserunt
facilis suscipit excepturi eaque porro. Sint, obcaecati tempore! Ratione praesentium dolores officia.

Start Tour

Hey there! Iama cool section with a cool background.

Highlight Me!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci consequuntur labore commodi corporis, corrupti animi sapiente officia similique qui veniam!

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Highlight Me Too!

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Javascript Code for this Element

// Tour Guide Highlight
	const startTourBtn = document.querySelector("#startTour");

	if (startTourBtn) {
	const driver = window.driver.js.driver;

	const driverObj = driver({
	steps: [
		{
		element: "#callOut",
		popover: { title: "Step 1", description: "Beginning of the walkthrough" },
		},
		{
		element: "#leftASide",
		popover: { title: "Step 2", description: "Ongoing walkthrough" },
		},
		{
		element: "#rightASide",
		popover: { title: "Step 3", description: "Last step of the walkthrough" },
		},
	],
	});

	if (startTourBtn) {
	startTourBtn.addEventListener("click", function () {
		driverObj.drive();
	});
	}
	}

HTML Code for this Element

<!-- title -->
	<h1 class="display-5 mt-4 text-center">Reference Section</h1>
	<!-- /title -->

	<!-- definition -->
	<p class="mb-0 py-4 text-center lead">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus a repellat deserunt <br>
			facilis suscipit excepturi eaque porro. Sint, obcaecati tempore! Ratione praesentium dolores officia.
	</p>
	<!-- /definition -->

	<!-- Walkthrough trigger -->
	<div class="text-center mb-4">
		<div class="btn btn-primary btn-lg" id="startTour">Start Tour</div>
	</div>
	<!-- /Walkthrough trigger -->

	<div id="callOut" class="d-flex justify-content-center mb-3">
		<div
			class="bg-info-subtle px-5 py-4 rounded-2 border-primary-subtle">
			Hey there! Iama cool section with a cool background.
		</div>
	</div>

	<div class="row py-3">
		<div class="col-md-6 col-sm-12">
			<div id="leftASide" class="alert alert-light" role="alert">
				<h4 class="alert-heading fw-semibold">Highlight Me!</h4>
				<p>
					Aww yeah, you successfully read this important alert
					message. This example text is going to run a bit longer so
					that you can see how spacing within an alert works with this
					kind of content. Lorem ipsum dolor sit amet consectetur
					adipisicing elit. Adipisci consequuntur labore commodi
					corporis, corrupti animi sapiente officia similique qui
					veniam!
				</p>
				<hr />
				<p class="mb-0">
					Whenever you need to, be sure to use margin utilities to
					keep things nice and tidy.
				</p>
			</div>
		</div>
		<div class="col-md-6 col-sm-12">
			<div id="rightASide" class="alert alert-light" role="alert">
				<h4 class="alert-heading fw-semibold">Highlight Me Too!</h4>
				<p>
					Aww yeah, you successfully read this important alert
					message. This example text is going to run a bit longer so
					that you can see how spacing within an alert works with this
					kind of content. Lorem ipsum dolor sit amet consectetur
					adipisicing elit. Adipisci consequuntur labore commodi
					corporis, corrupti animi sapiente officia similique qui
					veniam!
				</p>
				<hr />
				<p class="mb-0">
					Whenever you need to, be sure to use margin utilities to
					keep things nice and tidy.
				</p>
			</div>
		</div>
	</div>