Fix tooltip rendering in wrong position on first mount

components/poll/participant-row-form.tsx

@@ -7,6 +7,7 @@ import { requiredString } from "../../utils/form-validation";
 import Button from "../button";
 import CheckCircle from "../icons/check-circle.svg";
 import NameInput from "../name-input";
+import Tooltip from "../tooltip";
 import { ControlledScrollDiv } from "./poll";
 import { usePollContext } from "./poll-context";
 import { ParticipantForm } from "./types";
@@ -160,13 +161,15 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
           })}
         </ControlledScrollDiv>
         <div className="flex items-center px-2 space-x-2 transition-all">
-          <Button
+          <Tooltip content="Save" placement="top">
-            htmlType="submit"
+            <Button
-            icon={<CheckCircle />}
+              htmlType="submit"
-            type="primary"
+              icon={<CheckCircle />}
-            loading={isSubmitting}
+              type="primary"
-            data-testid="submitNewParticipant"
+              loading={isSubmitting}
-          />
+              data-testid="submitNewParticipant"
+            />
+          </Tooltip>
           <Button onClick={onCancel} type="default">
             Cancel
           </Button>

components/tooltip.tsx

@@ -91,7 +91,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
       >
         {children}
       </div>
-      {portal && debouncedValue
+      {portal
         ? ReactDOM.createPortal(
             <div
               ref={setPopperElement}

style.css

@@ -124,6 +124,10 @@
   [data-popper-placement="bottom"] .tooltip-arrow {
     @apply bottom-full border-b-slate-700;
   }
+
+  [data-popper-placement="top"] .tooltip-arrow {
+    @apply top-full border-t-slate-700;
+  }
 }
 
 @layer components {