For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.
Important note The component markup is not hard coded, instead its built on the fly when the trigger button is clicked. To make this happen, you will need to build your own script to trigger these coachmarks. You can see how we put everything together below, in our structure section.
The recommended way to fire off a coachmark is to generate the markup with JS, and not place a hardcoded
<pearson-coachmark> tag in the document.
First, we'll create a button element that triggers the alert script.
In this example well create a basic button with the id you want to query in your script. Well use
Next we will build out the script that generates the coachmark.
We start the script by querying the button that triggers the coachmark.
Next, we create a
<pearson-coachmark> element and assign it to variable.
Then we'll add one more variable called
target where we want the coachmark to appear in the dom.
Now, we'll create a function that builds out and renders the coachmark element.
Then lets use that function to generate your coachmark.
Finally, lets add an event listener to the button that triggers the coachmark.
Last but not least, add the script to your document.
Important note: To view the full script we used in these demos you can view it on GitHub.
All these attributes are required.
|String||unset||The ID of the button invoking the coachmark, this is important for accessibility and focus management.|
|String||unset||The ID of element you want the coachmark to appear on.|
|String||unset||The title of the coachmark|
|String||unset||The content you want the coachmark to display|
|String||The type of coachmark |
All these attributes are optional.
|Bool||unset||Renders an arrow on the coachmark.|
|String||unset||If left blank |
|Bool||unset||If set to true, the got it button will also dismiss the coachmark|
|Bool||TRUE||removing this attribute will destroy the coachmark and fire off a dismiss event.|
pearson-coachmark emits two events:
proceed Once an coachmark is dismissed, it is removed from the DOM.
|Will fire when the user interacts with the close button.|
|Will fire when the user interacts with the 'got it' button and the |
Do you want to use your own JS to make the coachmarks function? No problem, use the markup below along with CSS to build coachmarks with your own JS.
Important note: You can follow the UXF guidelines to view the suggested functionality of the coachmark.