Add popover position example

docs/src/components/CodeSample.tsx

@@ -4,7 +4,7 @@ import "driver.js/dist/driver.css";
 import { useState } from "react";
 
 type CodeSampleProps = {
-  heading: string;
+  heading?: string;
 
   config?: Config;
   highlight?: DriveStep;
@@ -12,7 +12,8 @@ type CodeSampleProps = {
 
   id?: string;
   className?: string;
-  children: any;
+  children?: any;
+  buttonText?: string;
 };
 
 function removeDummyElement() {
@@ -41,7 +42,7 @@ function mountDummyElement() {
 
 export function CodeSample(props: CodeSampleProps) {
   const [driverObj, setDriverObj] = useState<any>(null);
-  const { heading, id, children, className, config, highlight, tour } = props;
+  const { heading, id, children, buttonText = "Show me an Example", className, config, highlight, tour } = props;
 
   function onClick() {
     if (highlight) {
@@ -97,10 +98,11 @@ export function CodeSample(props: CodeSampleProps) {
 
   return (
     <div id={id} className={className}>
-      <p className="text-lg -mt-0 font-medium text-black -mb-3 rounded-md">{heading}</p>
-      <div className="-mb-4">{children}</div>
+      {heading && <p className="text-lg -mt-0 font-medium text-black -mb-3 rounded-md">{heading}</p>}
+      {children && <div className="-mb-4">{children}</div>}
+      {!children && <div className="mb-1"></div>}
       <button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
-        Show me an Example
+        {buttonText}
       </button>
     </div>
   );

docs/src/content/guides/animated-tour.mdx

@@ -45,6 +45,6 @@ The following example shows how to create a simple tour with a few steps. Click
     ]
   });
 
-  driver.drive();
+  driverObj.drive();
   ```
 </CodeSample>

docs/src/content/guides/async-tour.mdx

@@ -75,7 +75,7 @@ You can also have async steps in your tour. This is useful when you want to load
 
 });
 
-driver.drive();
+driverObj.drive();
 
 ```
 </CodeSample>

docs/src/content/guides/basic-usage.mdx

@@ -39,7 +39,7 @@ const driverObj = driver({
   ]
 });
 
-driver.drive();
+driverObj.drive();
 ```
 </CodeSample>
 

docs/src/content/guides/confirm-on-exit.mdx

@@ -43,7 +43,7 @@ You can use the `onDestroyStarted` hook to add a confirmation dialog or some oth
     },
   });
 
-  driver.drive();
+  driverObj.drive();
   ```
 </CodeSample>
 

docs/src/content/guides/popover-position.mdx

@@ -0,0 +1,211 @@
+---
+title: "Popover Position"
+groupTitle: "Examples"
+sort: 6
+---
+
+import { CodeSample } from "../../components/CodeSample.tsx";
+
+You can control the popover position using the `side` and `align` options. The `side` option controls the side of the element where the popover will be shown and the `align` option controls the alignment of the popover with the element.
+
+> **Note:** Popover is intelligent enough to adjust itself to fit in the viewport. So, if you set `side` to `left` and `align` to `start`, but the popover doesn't fit in the viewport, it will automatically adjust itself to fit in the viewport. Consider highlighting and scrolling the browser to the element below to see this in action.
+
+```js
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
+
+const driverObj = driver();
+driverObj.highlight({
+  element: '#left-start',
+  popover: {
+    title: 'Animated Tour Example',
+    description: 'Here is the code example showing animated tour. Let\'s walk you through it.',
+    side: "left",
+    align: 'start'
+  }
+});
+```
+
+<div id="sample-box" className='p-12 bg-gray-200 rounded-md flex items-center justify-center'>
+  <p>Use the buttons below to show the popover.</p>
+</div>
+
+<CodeSample
+  buttonText={"Left Start"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Left Start Example',
+      description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "left",
+      align: 'start'
+    }
+  }}
+  id={"left-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Left Center"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Left Center Example',
+      description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "left",
+      align: 'center'
+    }
+  }}
+  id={"left-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Left End"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Left End Example',
+      description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "left",
+      align: 'end'
+    }
+  }}
+  id={"left-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Top Start"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Top Start Example',
+      description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "top",
+      align: 'start'
+    }
+  }}
+  id={"top-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Top Center"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Top Center Example',
+      description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "top",
+      align: 'center'
+    }
+  }}
+  id={"top-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Top End"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Top End Example',
+      description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "top",
+      align: 'end'
+    }
+  }}
+  id={"top-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Right Start"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Right Start Example',
+      description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "right",
+      align: 'start'
+    }
+  }}
+  id={"right-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Right Center"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Right Center Example',
+      description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "right",
+      align: 'center'
+    }
+  }}
+  id={"right-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Right End"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Right End Example',
+      description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "right",
+      align: 'end'
+    }
+  }}
+  id={"right-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Bottom Start"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Bottom Start Example',
+      description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "bottom",
+      align: 'start'
+    }
+  }}
+  id={"bottom-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Bottom Center"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Bottom Center Example',
+      description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "bottom",
+      align: 'center'
+    }
+  }}
+  id={"bottom-start"}
+  client:load
+/>
+
+<CodeSample
+  buttonText={"Bottom End"}
+  highlight={{
+    element: '#sample-box',
+    popover: {
+      title: 'Bottom End Example',
+      description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
+      side: "bottom",
+      align: 'end'
+    }
+  }}
+  id={"right-start"}
+  client:load
+/>

docs/src/content/guides/static-tour.mdx

@@ -47,6 +47,6 @@ You can simply set `animate` option to `false` to make the tour static. This wil
     ]
   });
 
-  driver.drive();
+  driverObj.drive();
   ```
 </CodeSample>