History: PluginTour
Preview of version: 20
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 |
Examples
The first step:
Copy to clipboard
{TOUR(title="Welcome to the tour" prev="-1" element="#PluginTour")}Here's the start of a tour.{TOUR}
A middle step:
Copy to clipboard
{TOUR(title="A typical middle step")}This step is neither first nor last on the page, isn't anchored to an element, and isn't an orphan. It's nothing special.{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="PluginTour-page-2")}This plugin has a title and body content, but these won't be displayed - this step is simply a redirect to the target page.{TOUR}
The last step:
Copy to clipboard
{TOUR(next="-1")}This is the last step of the tour.{TOUR}
Usage notes
- 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. Simply using a wiki page name is OK. - A tour plugin step that uses the
pathparameter doesn't itself display (it is not visible); it simply acts as a redirect, so it shouldn't be used to contain information. Any guidance to the user that the tour is continuing on another page should be inserted in the previous plugin step (as of May 2017). - At this time, the "prev" button on the first step of the tour's second page is ghosted and doesn't work to return to the first page.
Alias names for this page
Plugin Tour | Plugin Tours | PluginTours | Tour | Tours