From cae9e3ece38fb38f56c19edb13bbb631280bb58d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 16 Mar 2018 22:56:29 +0100
Subject: [PATCH] Add docs

---
 index.html | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f48d707..31306e6 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,8 @@
 <div class="page-wrap">
   <section class="section__header" id="driver-demo-head">
     <h1><span id="logo_emoji" class="emoji">👨‍🔧️</span> <span id="name_driver">Driver</span></h1>
-    <p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the
+    <p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across
+      the
       page</p>
 
     <a id="animated-tour" href="javascript:void(0)" class="btn btn__example btn__dark">With Animation</a>
@@ -250,6 +251,11 @@ driver.highlight({
   opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
   padding: 10,    // Distance of element from around the edges
   allowClose: true, // Whether clicking on overlay should close or not
+  doneBtnText: 'Done', // Text on the final button
+  closeBtnText: 'Close', // Text on the close button for this step
+  nextBtnText: 'Next', // Next button text for this step
+  prevBtnText: 'Previous', // Previous button text for this step
+  showButtons: false, // Do not show control buttons in footer
   scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
   onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
   onHighlighted: (Element) {}, // Called when element is fully highlighted
@@ -257,6 +263,8 @@ driver.highlight({
 });
 </code></pre>
     </div>
+    <p class="top-20">Note that all the button options that you provide in the driver definition can be overridden for a
+      specific step by giving them int he step definition</p>
     <div class="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
@@ -267,10 +275,9 @@ driver.highlight({
     title: 'Title',      // Title on the popover
     description: 'Description', // Body of the popover
     showButtons: false,      // Do not show control buttons in footer
-    doneBtnText: 'Done',     // Text on the last button
-    closeBtnText: 'Close',   // Text on the close button
-    nextBtnText: 'Next',     // Next button text
-    prevBtnText: 'Previous', // Previous button text
+    closeBtnText: 'Close',   // Text on the close button for this step
+    nextBtnText: 'Next',     // Next button text for this step
+    prevBtnText: 'Previous', // Previous button text for this step
   }
 };
 </code></pre>