History: PluginTour
Preview of version: 7
Plugin Tour
Introduced in Tiki15
Use this wiki plugin to build your product tours, page component describers and other sequential information displays with Bootstrap popovers in a quick and easy way, using Bootstrap Tour.
Table of contents
Parameters
Quick and easy way to build your product tours with Driver.jsIntroduced in Tiki 15. Required parameters are in
bold.Go to the source code
Preferences required: wikiplugin_tour
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
| (body of plugin) | Content of the step | |||
title |
text | Title of the step | 15.0 | |
element |
text | Element to show the popup on; if empty, use the plugin location itself | 15.0 | |
next_button_text |
text | Text to show on the Next button. (Set only in the first step.) | Next | 27.0 |
number_of_steps |
int | Number of steps in the tour. (Set only in the first step.) | 27.0 | |
overlay_color |
text | Set an overlay color to be shown behind the popover and its element, highlighting the current step. (Set only in the first step.) | transparent | 27.0 |
overlay_opacity |
int | Set the opacity of the overlay. (Set only in the first step.) | 0.5 | 27.0 |
prev_button_text |
text | Text to show on the Prev button. (Set only in the first step.) | Previous | 27.0 |
progress_text |
text | Template for the progress text. You can use the following placeholders in the template: // - : The current step number. // - : Total number of steps. Example: Step of . (Set only in the first step.) | of | 27.0 |
show_restart_button |
text | Display a button to restart the tour. Enter the text to appear on the button. (Set only in the first step.) | 15.0 | |
tour_id |
text | Set a tour ID to be able to only show the tour once. (Set only in the first step.) | default | 15.0 |
align |
end start center |
The alignment of the popup. (Set only in the first step.) | end | 15.0 |
animate |
y n |
Animate the popup. (Set only in the first step.) | y | 27.0 |
show_once |
(blank) y n |
Show automatically only once. tour_id should also be set if there are multiple tours. (Set only in the first step.) | n | 15.0 |
show_progress |
y n |
Show the progress text in popover. (Set only in the first step.) | n | 27.0 |
side |
right top bottom left |
The side of the popup. (Set only in the first step.) | right | 15.0 |
start |
y n |
Start the tour on page load? If "No", then a start button can be made with "Restart Button", below. (Set only in the first step.) | y | 15.0 |
allow_close |
y n |
Allow closing the popover by clicking on the backdrop. (Set only in the first step.) | y | 16.0 |
(Preliminary information pending release of Tiki 15)
| Parameter | Accepted values | Description | Default | |
element | text | Element to show the popup on; if empty, use the plugin location itself | ||
title | integer | Title of the step | ||
next | integer | Index of the step to show after this one, starting from 0, -1 for the last one | ||
prev | integer | Index of the step to show before this one, starting from 0, -1 not to show | ||
path | text | Path to the page on which the step should be shown | ||
start | (blank) y n | Start the tour on page load? | y | |
placement | (blank) top right bottom left | On which side of the element the popup should appear | right | |
backdrop | (blank) 1 0 | Makes the background dark and highlights the element | 0 | |
orphan | (blank) 1 0 | Is not tied to a particluar element. Is centered on the page and has no pointer | 0 | |
show_once | (blank) 1 0 | Sets to show the tour only the first time a user visits. Is set using a cookie (todo: set using 'user' pref) | 0 | |
tour_id | (blank) any string | An identifier for the tour to work with the "show_once" param if there are multiple tours. | ||
Examples
The first step:
Copy to clipboard
{TOUR(title="Welcome to the tour" prev="-1")}Here's the start of a tour.{TOUR}
A middle step:
Copy to clipboard
{TOUR(title="A Jumbotron")}Use a jumbotron to make an area for special intro information, etc.{TOUR}
A step that specifies a page element:
Copy to clipboard
{TOUR(element="#module_1 .panel-heading" title="This is a module heading.")}This is a module.{TOUR}
A step that indicates that the following step is on another page:
Copy to clipboard
{TOUR(path="Bootstrap-Tour-page-2")}The next step is on page 2.{TOUR}
The last step:
Copy to clipboard
{TOUR(next="-1")}This is the last step of the tour.{TOUR}
Usage notes (preliminary as of Dec. 18, 2015)
- For each step of the tour, input the Tour plugin syntax as shown above.
- The first and last steps need a
prev="-1"andnext="-1"parameter, respectively. - Each step will pop over the page element where the plugin syntax is input in the wiki page, etc.
- To create a step that is positioned other than where the plugin syntax is input, use the
elementparameter to specify an HTML id or other unique selector. - Use the
pathparameter to indicate that the next step is on another page.
Note: As of December 18, the path parameter worked but the Tour step on the target page didn't display. I don't know if this was my editing error or if the plugin isn't completely implemented yet.
Alias names for this page
Plugin Tour | Plugin Tours | PluginTours | Tour | Tours