使用带有浮动按钮的chakra-ui ToolTip

Question

我试图创建一个浮动的“紧急出口”按钮，我的反应类型记录应用程序将立即将用户带到weather.com。我在创建按钮时没有遇到任何问题，但是当在按钮上悬停时，需求需要一个工具提示。由于我们在整个产品中使用chakra-ui，所以使用他们提供的工具提示组件对我来说似乎很自然。

我的第一次尝试是这样的：

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}
    </>
  );
};

当我将此按钮插入应用程序并悬停在其上方时，工具提示将出现在屏幕的左上角，当您将指针移离该按钮时，它不会消失。(代码框：https://codesandbox.io/s/objective-rain-z5szs7)

在查阅了chakra-工具提示上的ui文档之后，我意识到我应该为包装的组件使用一个forwardRef，所以我修改了EmergencyExitButton如下所示：

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}
  </>
);

在这个迭代中，工具提示根本没有出现。(代码框：https://codesandbox.io/s/kind-voice-i230ku)

我非常希望就如何使这项工作得到任何建议或意见。

编辑以修正代码一点。

Answer 1

我想通了。原来，我不需要创建一个forwardRef，我只需要将按钮包装在一个span标记中。

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}
    </>
  );
};