Fix popover and arrow rendering

index.html

@@ -449,6 +449,10 @@ npm install driver.js</pre
 
         driverObj.highlight({
           element: "#hooks",
+          popover: {
+            title: "Hooks",
+            description: "Here are all the hooks",
+          },
         });
 
         window.setTimeout(() => {

src/driver.ts

@@ -1,8 +1,8 @@
 import { destroyPopover, Popover } from "./popover";
 import { destroyStage } from "./stage";
-import { destroyEvents, initEvents } from "./events";
+import { destroyEvents, initEvents, requireRefresh } from "./events";
 import { Config, configure, getConfig } from "./config";
-import { destroyHighlight, highlight, refreshActiveHighlight } from "./highlight";
+import { destroyHighlight, highlight } from "./highlight";
 import { destroyEmitter, listen } from "./emitter";
 
 import "./style.css";
@@ -70,7 +70,7 @@ export function driver(options: Config = {}) {
   return {
     isActive: () => getState("isInitialized") || false,
     refresh: () => {
-      refreshActiveHighlight();
+      requireRefresh();
     },
     drive: (steps: DriveStep[]) => console.log(steps),
     highlight: (step: DriveStep) => {

src/events.ts

@@ -2,7 +2,7 @@ import { refreshActiveHighlight } from "./highlight";
 import { emit } from "./emitter";
 import { getState, setState } from "./state";
 
-function requireRefresh() {
+export function requireRefresh() {
   const resizeTimeout = getState("resizeTimeout");
   if (resizeTimeout) {
     window.cancelAnimationFrame(resizeTimeout);

src/highlight.ts

@@ -68,7 +68,6 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   const isFirstHighlight = !fromElement || fromElement === toElement;
   const isToDummyElement = toElement.id === "driver-dummy-element";
   const isFromDummyElement = fromElement.id === "driver-dummy-element";
-  const hasNoPreviousPopover = fromStep && !fromStep.popover;
 
   const highlightStartedHook = getConfig("onHighlightStarted");
   const highlightedHook = getConfig("onHighlighted");
@@ -82,7 +81,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     highlightStartedHook(isToDummyElement ? undefined : toElement, toStep);
   }
 
-  const hasDelayedPopover = !isFirstHighlight && (hasNoPreviousPopover || isFromDummyElement || isToDummyElement);
+  const hasDelayedPopover = !isFirstHighlight;
   let isPopoverRendered = false;
 
   hidePopover();

src/popover.ts

@@ -53,9 +53,9 @@ export function renderPopover(element: Element, step: DriveStep) {
     description,
     showButtons = undefined,
     // doneBtnText = 'Done',
-    closeBtnText= 'Close',
-    nextBtnText= 'Next →',
-    prevBtnText = '← Previous',
+    closeBtnText = "Close",
+    nextBtnText = "Next →",
+    prevBtnText = "← Previous",
   } = step.popover || {};
 
   popover.nextButton.innerHTML = nextBtnText;
@@ -361,7 +361,11 @@ export function repositionPopover(element: Element, step: DriveStep) {
   // e.g. if element scrolled out of the screen to the top, the arrow should be rendered
   // pointing to the top. If the element scrolled out of the screen to the bottom,
   // the arrow should be rendered pointing to the bottom.
-  renderPopoverArrow(requiredAlignment, popoverRenderedSide, element);
+  if (!noneOptimal) {
+    renderPopoverArrow(requiredAlignment, popoverRenderedSide, element);
+  } else {
+    popover.arrow.classList.add("driver-popover-arrow-none");
+  }
 }
 
 function renderPopoverArrow(alignment: Alignment, side: Side, element: Element) {