The dk-tour component is a useful component when you need to introduce a user to a new feature on a web page. There are two main kinds of tours: callout and modal.
A callout tour is a collection of <dk-callout> components that display one at a time pointing out different elements around the page. Each callout can be positioned above, below, left or right of any element on the page. View the callouts for more information on how to set them up.
A modal tour is a tour contained within a single modal that displays similar to a slide show with page indicators and navigation buttons. View the tour modal for more information.
To create a tour you must start with a dk-tour element. This element will be used to run the tour. There are various methods available on the element that allow you to control the tour. Inside of dk-tour you will place several elements of either dk-tour-modal or dk-callout. Each element inside of dk-tour will represent a single step in the tour.
<dk-tour>
<dk-tour-modal></dk-tour-modal>
<dk-tour-modal></dk-tour-modal>
<dk-tour-modal></dk-tour-modal>
</dk-tour>
<!-- OR -->
<dk-tour>
<dk-callout></dk-callout>
<dk-callout></dk-callout>
<dk-callout></dk-callout>
</dk-tour>
Button Text
It is possible to set the text for buttons that trigger the various tour actions on each individual step or on the parent dk-tour element which will set the action text for all the steps.
Properties
Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
backText | back-text | Button text for going to the previous step. | string | "Back" |
dismissTourText | dismiss-tour-text | Button text for ending | string | "Skip Tour" |
finishText | finish-text | Button text for the last step of the tour. | string | "All Set!" |
ignoreTourText | ignore-tour-text | Text used for the callout outside of dk-tour that is used to ignore the tour. | string | "Okay, Got It" |
nextText | next-text | Button text for going to the next step. | string | "Next" |
startTourText | start-tour-text | Text used for the callout outside of dk-tour that is used to start the tour. | string | "Take the Tour" |
Callout Tour
<div class="demo-tour-container">
<button id="callout-tour" class="">
New Feature
</button>
<dk-callout
id="hi"
target="#callout-tour"
tour-id="the-tour"
open="true"
className="">
<h3 class="">New Feature!!!</h3>
<p class="">
Conversion Calculators lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Proin aliquam
volutpat.
</p>
</dk-callout>
<dk-tour id="the-tour" className="">
<dk-callout
target="#hello"
className="">
<h3 class="">New Feature!!!</h3>
<p class="">
Conversion Calculators lorem
ipsum dolor sit amet,
consectetur adipiscing elit.
Proin aliquam volutpat.
</p>
</dk-callout>
<dk-callout
target="#hello2"
className="">
<h3 class="">New Feature!!!</h3>
<p class="">
Conversion Calculators lorem
ipsum dolor sit amet,
consectetur adipiscing elit.
Proin aliquam volutpat.
</p>
</dk-callout>
<dk-callout
target="#hello3"
className="">
3. Hello cdk-callo
</dk-callout>
<dk-callout
target="#hello4"
className="">
4. hello2 callout
</dk-callout>
</dk-tour>
<div id="hello" class="tour-step">
Target div 1
</div>
<div id="hello2" class="tour-step">
Target div 2
</div>
<div id="hello3" class="tour-step">
Target div 3
</div>
<div id="hello4" class="tour-step">
Target div 4
</div>
</div>Modal Tour
<button id="new-feature">New Feature</button>
<dk-callout
target="#new-feature"
id="hi"
tour-id="tour"
open="true">
Unformatted text with no headline tag.
</dk-callout>
<dk-tour id="tour">
<dk-tour-modal>
<img
src="https://images.unsplash.com/photo-1591949150520-3d29b3cb62bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8ixlib=rb-1.2.1auto=formatfit=cropw=1350q=80"
alt=""
slot="step-img"
/>
<article slot="content">
<h3>Step 1 Headline</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
</article>
</dk-tour-modal>
<dk-tour-modal>
<img
src="https://images.unsplash.com/photo-1591949150520-3d29b3cb62bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8ixlib=rb-1.2.1auto=formatfit=cropw=1350q=80"
alt=""
slot="step-img"
/>
<article slot="content">
<h3>Step 2 Headline</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
<a href="http://google.com">
We have the doom
</a>
</article>
</dk-tour-modal>
<dk-tour-modal>
<img
src="https://images.unsplash.com/photo-1591949150520-3d29b3cb62bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8ixlib=rb-1.2.1auto=formatfit=cropw=1350q=80"
alt=""
slot="step-img"
/>
<article slot="content">
<h3>Step 3 Headline</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
</article>
</dk-tour-modal>
<dk-tour-modal>
<article slot="content">
<h3>
Step 4 Headline - No Image
</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus mattis lacinia
fringilla. Duis et nulla sit
amet orci lacinia fermentum
vitae vitae turpis. Sed mattis
egestas venenatis. Integer sit
amet enim sit amet metus
aliquet egestas ac in elit.
Integer.
</p>
</article>
</dk-tour-modal>
</dk-tour>