This topic lists the options that are available in the Hopscotch library for defining tours.

Mandatory

  • target [STRING/ELEMENT/ARRAY] - id of the target DOM element or CSS selector for target DOM element or DOM element itself. It is also possible to define an array of several targets. If an array is provided, Hopscotch will use the first target that exists on the page and disregard the rest.

    If this parameter is given string, hopscotch will first try document.getElementById to test if it is an ID selector. If not it will in order try JQuery, Sizzle and finally document.querySelector. If target is not an ID selector, hopscotch will use the first element from the matched element list.

  • placement [STRING] - specifies where the bubble should appear in relation to the target. Valid values are "top", "bottom", "right", "left".

Optional

  • title [STRING] - step title

  • content [STRING] - step content

  • width [INT] - bubble width

  • padding [INT] - bubble padding

  • xOffset [INT] - horizontal position adjustment for bubble. Default: 0.

  • yOffset [INT] - vertical position adjustment for bubble. Default: 0.

  • arrowOffset [INT] - offset for the bubble arrow. Default: 0.

  • delay [INT] - number in milliseconds to wait before showing step. Default: 0.

  • zindex [INT] - sets the z-index of the bubble

  • showNextButton [BOOLEAN] - should show the next button. Default: true.

  • showPrevButton [BOOLEAN] - should show the prev button. Default: true.

  • showCTAButton [BOOLEAN] - should show the call-to-action button. Default: false.

  • ctaLabel [STRING] - label for the call-to-action button.

  • multipage [BOOLEAN] - indicates that the next step is on a different page. Default: false.

  • showSkip [BOOLEAN] - if true, 'Next' button reads 'Skip'. Default: false.

  • fixedElement [BOOLEAN] - set to true if the target element has fixed positioning. Default: false.

  • nextOnTargetClick [BOOLEAN] - triggers nextStep() when the target is clicked. Default: false.

  • onPrev [FUNCTION] - callback for when 'Previous' button is clicked}

  • onNext [FUNCTION] - callback for when 'Next' button is clicked}

  • onShow [FUNCTION] - callback for when step is first displayed}

  • onCTA [FUNCTION] - callback for the optional call-to-action button}

Related Topics

Discussion

Was this content helpful?

Log in or register an account to provide feedback


previousnext
 
expand all collapse all