CoachMark
Usage notes
Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.
Default
Toggle markup
<coral-coachmark></coral-coachmark>
<coral-popover target="_prev" open="">
<coral-popover-header>Zoom in</coral-popover-header>
<coral-popover-content>Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.</coral-popover-content>
<coral-popover-footer>
<button is="coral-button" coral-close="">Okay</button>
</coral-popover-footer>
</coral-popover>
With a target
Toggle markup
<div id="target" style="height:48px;width:48px;background:rgba(0,0,0,.4)"></div>
<coral-coachmark target="#target" variant="light"></coral-coachmark>
All variants
Toggle markup
<coral-coachmark variant="default"></coral-coachmark>
<coral-coachmark variant="light"></coral-coachmark>
<coral-coachmark variant="dark"></coral-coachmark>
Small sized
Toggle markup
<coral-coachmark variant="default" size="S"></coral-coachmark>
<coral-coachmark variant="light" size="S"></coral-coachmark>
<coral-coachmark variant="dark" size="S"></coral-coachmark>