In ZK 9, we are glad to introduce a new component – Coachmark. Coachmark is used to attract users’ attention to the target component and display further information in a dialog.


A coachmark is suitable for guiding users to navigate a specific component in the page; it should be as relevant as possible to the context. Combining multiple coachmarks you can guide users to perform a series of actions.

Once a coachmark is opened, the background mask will be displayed and the target component will be highlighted.




<button id="btn" label="Information"></button>
<coachmark id="c1" target="btn" position="before_center"
 next="c2" onTargetClick="">
   <label>Wellcome! click here for more information!</label>
   <button style="display:block;margin:10px auto 0" label="got it!" />

<button id="btn2" label="Information2"></button>
<coachmark id="c2" target="btn2" position="after_center" visible="false">
   <label>This is second Coachmark!</label>


Both visible attribute and open/close methods allow you to open or close the Coachmark.

  • open():
    Opens the coachmark.
  • close():
    Closes the coachmark.

The next coachmark will be opened when onTargetClick event is called, or when next() method is called.

  • next():
    Closes the current coachmark and Opens the next defined coachmark.
  • next(Coachmark coachmark):
    Closes the current coachmark and Opens the given one (ignore the pre-defined next coachmark)



  • onTargetClick: Represents an event caused by a user’s click on a highlighted target component.
  • onOpen: Denotes that the user has opened or closed a component.

For more information please refer to Coachmark.

The whole demo project can be found on the GitHub project and we welcome you to try it out and share with us your feedback.

The feature is available in ZK 9.0. Feel free to try it out and tell us how you like it!

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply