setSteps

initializes the Hint component with an array of steps

void setSteps(array steps);

steps

array

an array of step objects

Example

webix.ui({
    view: "hint",
    id: "hint",
    steps: []
});
 
$$("hint").setSteps(
    [
        {
            el: ".div1",
            title: "Welcome to Booking App!",
            text: "Click here to check out regular flights",
            event:"click"
        },
        {
            el: ".div2",
            title: "Get Flights Info in a Click!",
            text: "Click here to take a look at all flights info",
            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