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.
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.
<dk-tour>
<dk-tour-modal></dk-tour-modal>
<dk-tour-modal></dk-tour-modal>
<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-callout></dk-callout>
<dk-callout></dk-callout>
</dk-tour>
Each element inside of dk-tour will represent a single step in the tour. Please see the page for each component for details on how to use them.
Button Text
It is possible to set the text for buttons that trigger the various tour actions on the individual steps. It is also possible to set them on the dk-tour element. This 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">
Do the thing man
</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>Tour Text
<p>TODO</p>