Page Tour
Popover Positioning
You can also, change the position of the popover to be either left
, top
, right
or bottom
.
var driver = new Driver();driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', position: 'left', // can be `top`, `left`, `right`, `bottom` }});
Creating Feature Introductions
You can also make powerful feature introductions to guide the users about the features. Just provide an array of steps where each step specifies an element to highlight.
Below is just a quick example showing you how to combine the steps in introduction.
var driver = new Driver({ opacity: 0.5});// Define the steps for introductiondriver.defineSteps([ { element: '#popover-feature-introduction-p1', popover: { title: 'Before we start', description: 'This is just use-case, make sure to check out the rest of the docs below', position: 'top' } }, { element: '#popover-feature-introduction-p2', popover: { title: 'Title on Popover 1', description: 'Body of the popover', position: 'top' } }, { element: '#popover-feature-introduction-p3', popover: { title: 'Title on Popover 2', description: 'This is just use-case, make sure to check out the rest of the docs below', position: 'top' } }]);// Start the introductiondriver.start();
HTML in Popovers
You can also specify HTML in the body or the title of the popovers. Here is an example: