Hint
Widget

An onboarding popup that highlights a UI element and displays instructional content to guide the user through a feature. This class is not instantiated directly — instead, use HintFlow to define a sequence of hints with navigation actions. Each hint anchors to a target element (via CSS selector), shows a title and content, and can trigger actions (click, type, drag) when the user navigates between steps. Keyboard shortcuts are supported: N for next, P for previous, S or Escape to stop.

new HintFlow({
    defaults : { modal : true },
    hints    : [{
        target     : '.b-tabpanel-tab[data-item-index="1"]',
        title      : 'Change tab',
        content    : 'Click here to move to the next tab',
        nextAction : {
            click : '.b-tabpanel-tab[data-item-index="1"]'
        }
    }, {
        target     : '.b-button:contains(Save)',
        title      : 'Save',
        content    : 'Click here to save the changes',
        nextAction : {
            click : '.b-button:contains(Save)'
        }
    }]
});

Useful configs and properties

Config	Description
title	Title displayed in the hint header
content	Instructional text or HTML content
anchor	Show an anchor arrow pointing to the target element
modal	Dim the background behind the hint

Hint configuration properties

Each entry in the hints array of the HintFlow class should be an object with the following properties:

target: Required. The target element to highlight, or a CSS selector to find the target element. If the target selector ends with a ?, the hint will be skipped if the target is not found. By default, the hint will be aligned to this element.
title: The title to display in the hint.
content: Required. The content to display in the hint.
align: The alignment of the hint relative to the target element. If this is specified as an AlignSpec object, the hint will be aligned to the target property of this object if present.
- target: The element to align to, or a CSS selector to find the element to align to.
nextAction: The action(s) to take when the 'Next' button is clicked. Properties may be:
- click: A CSS selector to find the target element to click.
- type: A string to type into the target element.
- dblclick: A CSS selector to find the target element to double click.
- contextmenu: A CSS selector to find the target element to right click.
- fn: A function to call when the hint is shown.
- drag: An object with the following properties:
  - target: The target element to drag, or a CSS selector to find the target element.
  - by: The distance to drag the target element, as an array of [dx, dy].
- waitFor: A CSS selector to wait for or the number of milliseconds to wait before continuing to the next hint.
previousAction: The action(s) to take when the 'Previous' button is clicked.
autoNext: The number of milliseconds to wait before automatically moving to the next hint, or a CSS selector to find the target element to wait for.
highlightTarget: Specify as true to highlight the target element with a bright outline.
buttons: Overrides for buttons to show in the hint. This is an object which may contain the following properties:
- next: Override config for the 'Next' button
- previous: Override config for the 'Previous' button
- stop: Config to add a 'Stop' button. By default the dialog close, or typing S button is used.

Other properties (eg modal can be added to the object, and will be passed to the Hint instance.

When using a HintFlow tutorial, pressing N will navigate to the next hint, P will navigate to the previous hint. Pressing S or Escape will stop the tutorial.

Configs

Configs are options you supply in a configuration object when creating an instance of this class

autoNext : String/Number

Either the number of milliseconds to wait before automatically moving to the next hint, or a CSS selector to wait for before moving to the next hint.
buttons : Object<String, ButtonConfig>
Overrides for buttons to show in the hint.

By default, hints show a 'Next' button.

The last hint will show a 'Previous' button instead of 'Next'.

These buttons can be overridden by providing a buttons config object for the listed properties
- next : ButtonConfig
  
  Override the 'Next' button
- previous : ButtonConfig
  
  Override the 'Previous' button
highlightTarget : Boolean/Objectfalse
Specify as a truthy value to highlight the target element with a bright outline.
- ping : Boolean
  
  Specify as true to have the outline expand repeatedly with a "ping" animation.
- center : String
  
  Specify as a CSS color to use as the color of a 20 pixel diameter
- inflate : Number/Number[]
  
  Arguments to inflate. Specify as a number to inflate the target rect by that many pixels, or as an array of inflate values for each edge.
keyMap : Object.
The mapping of key names to hint actions. The actions are previous, next, and stop. By default, the following key mappings are used:
- P for previous
- N for next
- S for stop The key mappings can be overridden by providing a keyMap config object.
maxWait : Number10000

How long in milliseconds to wait for a target to become available before giving up.
nextAction : HintActions/HintActions[]

The actions to take when the 'Next' button is clicked.

By default, user interaction during these actions is disabled.

The property names are the actions to take, and the values are the configuration for that action.
previousAction : HintActions/HintActions[]

The actions to take when the 'Previous' button is clicked.

By default, user interaction during these actions is disabled.

The property names are the actions to take, and the values are the configuration for that action.
target : String/HTMLElement

The target element to highlight, or a CSS selector to find the target element.

Properties

Properties are getters/setters or publicly accessible variables on this class

isHint : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of Hint class, or subclass thereof.

isHint : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of Hint class, or subclass thereof.

Type definitions

HintActions
An object which describes actions to take when navigating between hints.
Properties
- click : String
  
  A CSS selector to click when the 'Previous' button is clicked,
- contextmenu : String
  
  A CSS selector to right-click when the 'Previous' button is clicked.
- dblclick : String
  
  A CSS selector to right-click when the 'Previous' button is clicked.
- type : Object/String
  
  String to type or an object with the following properties:
- target : String
  
  A CSS selector to find the target element to type into.
- text : String
  
  The string to type. May contain special characters like [Enter] or [Shift+Tab].
- initialDelay : Number
  
  The number of milliseconds to wait before starting to type.
- clear : Number
  
  Clear the input before typing.
- waitFor : String/Number
  
  A CSS selector to wait for or the number of milliseconds to wait.
- drag : Object
  
  An object with the following properties:
- target : String
  
  A CSS selector to find the target element to drag.
- by : Number[]
  
  The distance to drag the target element, as an array of [dx, dy].
- duration : Number500
  
  The duration of the drag in milliseconds.
- allowInteraction : Booleanfalse
  
  Allow user interaction during this action. By default user interaction is blocked during navigation from hint to hint.
- fn : Function
  
  A function to call when the 'Previous' button is clicked.

type: hint

Source path

Core/widget/Hint.js

Demo

examples/custom-rendering

Hint
Widget

Useful configs and properties

Hint configuration properties

See also

Configs

Properties

Type definitions

Properties

Source path

Demo

Inheritance tree6

Mixins8

Contents

Hint Widget

Useful configs and properties

Hint configuration properties

See also

Configs

Properties

Type definitions

Properties

Source path

Demo

Inheritance tree6

Mixins8

Contents

Hint
Widget