Use arrows as pointer for the tour tooltip

Author: andreas-schultz

src/components/VisualTour/VisualTour.tsx

@@ -28,7 +28,7 @@ export interface VisualTourStep {
     /** The texts used in the step, e.g. when custom layouts are rendered, these will be used for the text strings. */
     texts?: Record<string, string>;
     /** An image URL. This will be displayed in the step description. */
-    image?: string
+    image?: string;
 }
 
 /** This should be used for defining steps in a separate object/file. Use with 'satisfies' after the object definition. */
@@ -120,12 +120,14 @@ interface StepModalProps {
 }
 
 // Main content of a step
-const StepContent = ({step}: {step: VisualTourStep}) => {
-    return <div>
-        {step.image ? <img src={step.image} width={600} /> : null}
-        {typeof step.content === "string" ? step.content : step.content()}
-    </div>
-}
+const StepContent = ({ step }: { step: VisualTourStep }) => {
+    return (
+        <div>
+            {step.image ? <img src={step.image} width={600} /> : null}
+            {typeof step.content === "string" ? step.content : step.content()}
+        </div>
+    );
+};
 
 /** Modal that is displayed for a step. */
 const StepModal = ({ step, titleSuffix, onClose, actionButtons }: StepModalProps) => {
@@ -181,7 +183,9 @@ const StepPopover = ({ highlightedElement, step, titleSuffix, actionButtons }: S
             role="tooltip"
             ref={tooltipRef}
         >
-            <div id="arrow" data-popper-arrow></div>
+            <div id="arrow" data-popper-arrow>
+                <span className={`${eccgui}-visual-tour__tooltip__arrow-shape`} />
+            </div>
             <Card>
                 <CardHeader>
                     <CardTitle>{`${step.title} ${titleSuffix}`}</CardTitle>

src/components/VisualTour/stories/VisualTour.stories.tsx

@@ -29,8 +29,8 @@ const Template: StoryFn<typeof VisualTour> = (args: VisualTourProps) => {
     return (
         <div style={{ minHeight: "600px", minWidth: "800px" }}>
             <Toolbar id={"tourContainer"}>
-                <ToolbarSection id={"textSection"} canGrow={true}>
-                    Some text
+                <ToolbarSection canGrow={true}>
+                    <span id={"textSection"}>Some text</span>
                 </ToolbarSection>
                 <ToolbarSection id={"buttonSection"}>
                     <Button id={"actionA"}>Action A</Button>
@@ -86,6 +86,10 @@ const defaultArgs: VisualTourProps = {
             ...stepDefinitions.highlightElementB,
             highlightElementQuery: "#actionB",
         },
+        {
+            ...stepDefinitions.highlightElementLeft,
+            highlightElementQuery: "#textSection",
+        },
         {
             ...stepDefinitions.highlightElementC,
             highlightElementQuery: "#actionC",

src/components/VisualTour/stories/defaultTour.de.ts

@@ -21,6 +21,10 @@ const definition = {
         title: "Element B hervorheben",
         content: "Kontextoverlay für ein anderes hervorgehobenes Element.",
     },
+    highlightElementLeft: {
+        title: "Element auf der linken Seite hervorheben",
+        content: "Der Tooltip wird dort plaziert, wo er am besten für den Benutzer zu sehen ist.",
+    },
     highlightElementC: {
         title: "Element C hervorheben",
         content: "Element ist außerhalb des Tourcontainers.",

src/components/VisualTour/stories/defaultTour.ts

@@ -21,6 +21,10 @@ const definition = {
         title: "Highlight element B",
         content: "Context overlay for another highlighted element.",
     },
+    highlightElementLeft: {
+        title: "Highlight element on the left",
+        content: "The tooltip is placed where it is best seen by the user.",
+    },
     highlightElementC: {
         title: "Highlight element C",
         content: "Element outside tour container.",

src/components/VisualTour/visualTour.scss

@@ -5,35 +5,44 @@
 // TODO: From https://popper.js.org/docs/v2/tutorial/ until we fine-tune this part
 
 #arrow,
-#arrow::before {
+#arrow .#{$eccgui}-visual-tour__tooltip__arrow-shape,
+#arrow .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
     position: absolute;
-    width: 8px;
-    height: 8px;
-    background: dimgrey;
-    border-radius: 50%;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid dimgrey;
+    border-left: 8px solid transparent;
 }
 
 #arrow {
     visibility: hidden;
 }
 
-#arrow::before {
+#arrow .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
     visibility: visible;
     content: "";
 }
 
 .#{$eccgui}-visual-tour__tooltip[data-popper-placement^="top"] > #arrow {
     bottom: -8px;
+    .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
+        transform: rotate(180deg);
+    }
 }
 
 .#{$eccgui}-visual-tour__tooltip[data-popper-placement^="bottom"] > #arrow {
     top: -8px;
 }
 
 .#{$eccgui}-visual-tour__tooltip[data-popper-placement^="left"] > #arrow {
-    right: -8px;
+    right: 4px;
+    .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
+        transform: rotate(90deg);
+    }
 }
 
 .#{$eccgui}-visual-tour__tooltip[data-popper-placement^="right"] > #arrow {
-    left: -8px;
+    left: -28px;
+    .#{$eccgui}-visual-tour__tooltip__arrow-shape::before {
+        transform: rotate(270deg);
+    }
 }