This content originally appeared on CodyHouse and was authored by CodyHouse
Download + Demo
How to
The Product Tour component is used to create a step-by-step intro guide of a product.
To connect each tour step to a specific element in the page, add the data-p-tour-target attribute to the target element and set it equal to the index of the step (e.g., 1 for the first step).
<div data-p-tour-target="1">This is the target of the first step of the product tour</div>You can change the position of the tour pin over the target element using the data-p-tour-position attribute:
<div data-p-tour-target="1" data-p-tour-position="top">This is the target of the first step of the product tour</div>Possible values are:
- top
- bottom
- left
- right
- center
- bottom-left
- bottom-right
- top-left
- top-right
Dynamic Content #
If your tour component is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.
Once the dynamic content has been added to the page, initialize it using the PTour object. Use the show/hide methods to control the tour visibility.
// do this after your content has been added to the page
var pTour = document.getElementsByClassName('p-tour')[0]; // your dynamically created product tour
var pTourObj = new PTour(pTour);
pTourObj.show();
This content originally appeared on CodyHouse and was authored by CodyHouse
CodyHouse | Sciencx (2021-05-31T08:07:43+00:00) Component – Product Tour. Retrieved from https://www.scien.cx/2021/05/31/component-product-tour/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.