setSteps

initializes the Hint component with an array of steps

void setSteps(array steps);

Parameters

stepsarrayan 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
See also
  • API
  • Articles
  • Back to top