Mithril Tour Component
Tour Guide Component for Mithril.js
Install
- Download the latest package
- NPM:
npm install mithril-tour-component
- Browser: Use build/tour.js or build/tour.min.js
Usage
Node.js / Browserify
var m = var TourComponent =
Note: lib/styles/tour.css is also required.
Browser
Documentation
TourComponent
Creates and returns a component class constructor which takes two arguments:
Function
Options
skipped
- Boolean - Disable rendering of indicators completely.dismissed
- Array - Array of indicators that have been skipped. Useful for those remembering where the user is occasions.onskip
- Function(event, identifier) - Global skip handlerondismiss
- Function(event, identifier) - Global dismiss handler
Example:
var dismissed = 1var skipped = false
Indicators
Each indicator is an Object
that contains properties
the properties of an Indicator are as follows:
id
- Number / String - Indicator / Tooltip identifier, Optionalx
- Number - x position on the page, Optional when using.element
y
- Number - y position on the page, Optional when using.element
element
- Object - Attach indicator to elementelement.selector
- String - Target element selectorelement.position
- Possible options include:right, left, bottom right, bottom left, top right, top left, top, bottom
element.offset
- Object -x
andy
offsets, Optionalondismiss
- Function(event, identifier) - When a tooltip / indicator is dismissed (removed from page)onclick
- Function(event, identifier) - When the indicator is clicked on.onskip
- Function(event, identifier) - When the tour is completely skipped (all indicators are removed.)onclose
- Function(event, identifier) - When the tooltip backdrop is closed (not considered dismissing / confirming)tooltip
- Object - Tooltip settingstooltip.content
- Array - Mithril children placed in the content section of the tooltiptooltip.footer
- Object - Tooltip footer settingstooltip.footer.skipText
tooltip.footer.skipLinkText
tooltip.footer.dismissText
Example:
Example Usage
Building
npm install -g browserify uglify-js
npm run build
License
Licensed under The MIT License.