Place kind of pointer element between tooltip and highlighted element

Author: andreas-schultz

src/components/VisualTour/VisualTour.tsx

@@ -148,14 +148,30 @@ const StepPopover = ({ highlightedElement, step, titleSuffix, actionButtons }: S
             if (tooltip) {
                 createPopper(highlightedElement, tooltip, {
                     placement: "auto",
+                    modifiers: [
+                        {
+                            name: "offset",
+                            options: {
+                                offset: [0, 8],
+                            },
+                        },
+                        {
+                            name: "arrow",
+                        },
+                    ],
                 });
             }
         },
         [highlightedElement]
     );
 
     return (
-        <div className={`${eccgui}-tooltip__content` + ` ${eccgui}-tooltip--large`} role="tooltip" ref={tooltipRef}>
+        <div
+            className={`${eccgui}-tooltip__content` + ` ${eccgui}-tooltip--large` + ` ${eccgui}-visual-tour__tooltip`}
+            role="tooltip"
+            ref={tooltipRef}
+        >
+            <div id="arrow" data-popper-arrow></div>
             <Card>
                 <CardHeader>
                     <CardTitle>{`${step.title} ${titleSuffix}`}</CardTitle>

src/components/VisualTour/visualTour.scss

@@ -1,3 +1,39 @@
 .#{$eccgui}-visual-tour__highlighted-element {
     background-color: orange;
 }
+
+// TODO: From https://popper.js.org/docs/v2/tutorial/ until we fine-tune this part
+
+#arrow,
+#arrow::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: dimgrey;
+    border-radius: 50%;
+}
+
+#arrow {
+    visibility: hidden;
+}
+
+#arrow::before {
+    visibility: visible;
+    content: "";
+}
+
+.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="top"] > #arrow {
+    bottom: -8px;
+}
+
+.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="bottom"] > #arrow {
+    top: -8px;
+}
+
+.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="left"] > #arrow {
+    right: -8px;
+}
+
+.#{$eccgui}-visual-tour__tooltip[data-popper-placement^="right"] > #arrow {
+    left: -8px;
+}