History: PluginTour
Preview of version: 11
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 | text | 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 | The path to a second page of the tour, for example, path="Tour-page-2" | ||
start | (blank) y n | Start the tour on page load? | y | |
| show_restart_button | text | Creates a button using this parameter's text as the label, for example show_restart_button="Start tour" | ||
placement | (blank) top right bottom left | On which side of the element the popup should appear | right | |
backdrop | (blank) y n | Makes the background dark and highlights the element | n | |
orphan | (blank) y n | Is not tied to a particular element. Is centered on the page and has no pointer | n | |
show_once | (blank) y n | Sets to show the tour only the first time a user visits. Is set using a cookie (todo: set using 'user' pref) | n | |
tour_id | (blank) any valid HTML element name (must begin with a letter) | 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 first step on the second tour page (no special parameter is needed):
Copy to clipboard
{TOUR()}The first step 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 March 7, 2016)
- 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. - If the tour isn't configured to start on page load (if start="n" is set), a start button can be made with the "show_restart_button" parameter.
- Each step will pop over the page element where the plugin syntax is input in the wiki page, etc.
- The position of the popup relative to the element it pops up over can be set with the placement parameter.
- 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. - At this time, using the "prev" button on the first step of the tour's second page doesn't work to return to the first page.
Coming code improvements:
- The original Bootstrap Tour's popups (popovers) have a maximum width of 276 pixels, the Bootstrap default. For Tiki, this width limit was removed in order to support the display of wide Tracker item content, etc. But to improve the appearance of Tour plugin popovers, a code change is planned to reinstate the 276px default width for these popovers, along with a plugin parameter so the page author can specify another width for individual tour steps.
Alias names for this page
Plugin Tour | Plugin Tours | PluginTours | Tour | Tours