Enhancing User Experience - Implementing Guided Tutorial Functionality with Driver.js

4c1a12fb-0ca4-4198-82a6-12170dc4a91b (2)

Use driver.js to add some tutorial animations, which may be very helpful for tiddlywiki, such as plug-in tutorials, an option setting, this is an extremely rough demonstration Neotw-tour Plugin

6 Likes

Very good plugin, we can included it in tiddlywiki xp, or grok, to make welcom to new user.

afaik, some user don’t even know how to add new tiddler, when first facing so many buttons.

Example

<$tour tiddler="xxx.json" />
[
  {
    "element": ".tc-story-river",
    "popover": {
      "title": "stroy river",
      "description": "tc-story-river",
      "position": "right"
    }
  },
  {
    "element": ".tc-tiddler-title",
    "popover": {
      "title": "Tiddler Title",
      "description": "Tiddler Title",
      "position": "right"
    }
  },
  {
    "element": ".tc-subtitle",
    "popover": {
      "title": "subtitle",
      "description": "subTitle",
      "position": "bottom"
    }
  }
]