Coachmark is used to attract end-users' attention to the target component and display a dialog. Once a coachmark is opened, the background mask will be displayed and the target component will be highlighted.The content of coachmark should be as relevant as possible to the context. You can use more than one coachmarks to guide users to perform a series of operations in the desired order.

<zk xmlns:h="native">
    <button label="Show Coachmarks" onClick="m1.open()"/>
    <h:div class="header">
        <h:h1 style="display:inline">Superhero Catalog</h:h1>
        <textbox id="searchbox" placeholder="Search..." width="15vw"/>
    </h:div>
    <separator bar="true" stubonly="true"/>
    <hlayout height="240px" style="display:flex; gap: 24px">
        <image src="/widgets/popup/coachmark/sentinel.png" width="240px" height="240px"/>
        <div id="intro" width="45%" sclass="intro" height="100%">
            <h:h1>Azure Sentinel.</h:h1>
            Azure Sentinel is a superhero equipped with futuristic technology armor. His armor provides extraordinary protection and is equipped with advanced communication and detection systems. His abilities include flight, superhuman strength, and environmental scanning and data analysis through various sensors built into the armor.
            <h:div id="more" sclass="more">
                <button label="Details" />
                <button label="News" />
                <button label="Photos"/>
            </h:div>
        </div>
    </hlayout>
    <coachmark id="m1" target="intro" next="m2" onTargetClick="self.next()" position="before_center">Read the story</coachmark>
    <coachmark id="m2" target="searchbox" next="m3" visible="false" onTargetClick="self.next()" position="before_center">Search here</coachmark>
    <coachmark id="m3" target="more" visible="false" position="before_start" onTargetClick="self.close()">Check more information here</coachmark>
    <style src="/widgets/popup/coachmark/style.css"/>
</zk>