Using chakra-ui ToolTip with a floating button - reactjs

Question

I am attempting to create a floating "emergency exit" button for my React typescript application which will immediately take the user to weather.com. I'm having no trouble creating the button, but the requirements call for a tooltip when hovering over the button. Since we use chakra-ui throughout the product, using the Tooltip component they provide seems natural to me.
My first attempt looks like this:
Button.tsx
import React from "react";
import { Button as ChakraButton, ButtonProps } from "#chakra-ui/react";
interface Props extends ButtonProps {
buttonColor: string;
}
const Button: React.FC<Props> = ({
buttonColor,
children,
...restProps
}: Props) => (
<ChakraButton
backgroundColor={buttonColor}
color="white"
_hover={{
background: buttonColor
}}
_active={{
background: buttonColor
}}
padding="15px 30px"
height="auto"
fontSize="sm"
minWidth="200px"
borderRadius="100px"
fontFamily="AvenirBold"
{...restProps}
>
{children}
</ChakraButton>
);
export default Button;
EmergencyExitButton.tsx
import styled from "#emotion/styled";
import React from "react";
import Button from "./Button";
import { Tooltip } from "#chakra-ui/react";
const StyledButton = styled(Button)`
z-index: 99999;
position: fixed;
margin-left: calc(50% - 100px);
margin-top: 5px;
`;
export const EmergencyExitButton: React.FC = ({ children }) => {
const handleClick = () => {
window.open("https://weather.com", "_self");
};
return (
<>
<Tooltip
width="100%"
label="Immediately exit to the Weather Channel. Unsaved changes will be lost."
placement="bottom"
bg="black"
color="white"
>
<StyledButton buttonColor="#CC0000" onClick={handleClick}>
Emergency Exit
</StyledButton>
</Tooltip>
{children}
</>
);
};
When I insert this button into the application and hover over it, the tooltip appears in the top left corner of the screen and doesn't go away when you move the pointer away from the button. (codesandbox: https://codesandbox.io/s/objective-rain-z5szs7)
After consulting the chakra-ui documentation on Tooltip, I realized that I should be using a forwardRef for the wrapped component, so I modified EmergencyExitButton to look like this:
import * as React from "react";
import Button from "./Button";
import { Tooltip } from "#chakra-ui/react";
const EmergencyButton = React.forwardRef<HTMLDivElement>((props, ref) => {
const handleClick = () => {
window.open("https://weather.com", "_self");
};
return (
<div
ref={ref}
style={{
zIndex: 99999,
position: "fixed",
marginLeft: "calc(75% - 100px)",
marginTop: "5px"
}}
>
<Button buttonColor="#CC0000" onClick={handleClick}>
EmergencyExit
</Button>
</div>
);
});
EmergencyButton.displayName = "EmergencyButton";
export const EmergencyExitButton: React.FC = ({ children }) => (
<>
<Tooltip
width="100%"
label="Immediately exit to the Weather Channel. Unsaved changes will be lost."
placement="bottom"
bg="black"
color="white"
hasArrow
style={{ zIndex: 99999 }}
>
<EmergencyButton />
</Tooltip>
{children}
</>
);
In this iteration, the tooltip doesn't appear at all. (codesandbox: https://codesandbox.io/s/kind-voice-i230ku)
I would really appreciate any advice or ideas on how to make this work.
Edited to fix the code a little.

Answer 1

I figured it out. It turns out that instead of creating a forwardRef, I just needed to wrap the button in a span tag.
import React from 'react';
import Button from './Button';
import { Tooltip } from '#chakra-ui/react';
export const EmergencyExitButton: React.FC = ({ children }) => {
const handleClick = () => {
window.open('https://weather.com', '_self');
};
return (
<>
<Tooltip
width='100%'
label='Immediately exit to the Weather Channel. Unsaved changes will be lost.'
placement='bottom'
bg='black'
color='white'
>
<span style={{ zIndex: 99999, position: 'fixed', marginLeft: 'calc(50% - 100px)', marginTop: '5px'}}>
<Button buttonColor='#CC0000' onClick={handleClick}>Emergency Exit</Button>
</span>
</Tooltip>
{children}
</>
);
};

Answer 2

I think the prop shouldWrapChildren could be used in this case.
See https://chakra-ui.com/docs/components/tooltip/props