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,6 +161,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
           })}
         </ControlledScrollDiv>
         <div className="flex items-center px-2 space-x-2 transition-all">
+          <Tooltip content="Save" placement="top">
             <Button
               htmlType="submit"
               icon={<CheckCircle />}
@@ -167,6 +169,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
               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 {