steps

an array of objects that define the look and behavior on each of the steps

array steps;

Example

webix.ui({
    view: "hint",
    id: "hint",
    steps: [
        {
            el: ".div1",
            title: "Welcome to Handy HTML!",
            text: "Click here to Begin",
            event:"click"
        },
        {
            el: ".div2",
            title: "Learn Everything!",
            text: "Click here to take a look at all that you can learn",
            event:"click"
        }
    ];
});

Details

Each step object includes the following properties:

el - (string - Webix id without $$ or any querySelector) mandatory, defines the element that will be highlighted when the hint appears. It can also trigger an event that will switch hint to the next step, if the eventEl property is not defined. Read the details
eventEl - (string) - optional, if specified defines the element that will trigger an event instead of the el element.
title - (string|HTMLElement) optional, the title of the step
text - (string|HTMLElement) optional, the instruction for users
event - (string) optional, the name of the event that will switch to the next step: a click on the highlighted area or the Enter key press
padding - (number) optional, the padding for the highlighted element; by default, it's set to 0
next - (function) optional, sets a function that returns a promise for the next part of the data from the datatable. Read the details
previous - (function) optional, sets a function that returns a promise for the previous part of the data from the datatable. Read the details