Hopscotch Options for Tours (Deprecated): /Documentation/Archive/20.7

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

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".

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}