<pre><codeclass="javascript">const driver = new Driver({
opacity: 0,
});
driver.highlight({
element: '#run-element-without-popover',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
position: 'top', // can be `top`, `left`, `right`, `bottom`
}
});
</code></pre>
<pclass="top-20">..and you can do the same for the feature introductions</p>
</div>
<hrclass="hr__fancy">
<divclass="section__example">
<h3>..and much much more</h3>
<p>Driver comes with many options that you can manipulate to make driver behave as you may like</p>
<h4>Driver Definition</h4>
<p>Here are the options that Driver understands</p>
<pre><codeclass="javascript">const driver = new Driver({
animate: true, // Animate while changing highlighted element
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
onHighlighted: (Element) {}, // Called when element is fully highlighted
onDeselected: (Element) {}, // Called when element has been deselected
});
</code></pre>
</div>
<divclass="section__example">
<h4>Step Definition</h4>
<p>Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that you pass to <code>highlight</code> method</p>