使用带浮动按钮的 chakra-ui 工具提示

Question

我正在尝试为我的 React typescript 应用程序创建一个浮动的“紧急退出”按钮，它将立即将用户带到 weather.com。我在创建按钮时没有遇到任何问题，但 requirements 在将鼠标悬停在按钮上时需要工具提示。由于我们在整个产品中使用 chakra-ui，因此使用他们提供的 Tooltip 组件对我来说似乎很自然。

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

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;

紧急出口Button.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}
    </>
  );
};

当我将此按钮插入应用程序并将鼠标悬停在它上面时，工具提示出现在屏幕的左上角，并且当您将指针从按钮移开时它不会消失。 (codesandbox: https://codesandbox.io/s/objective-rain-z5szs7)

在查阅了 chakra-ui documentation on Tooltip 之后，我意识到我应该为包装组件使用 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}
  </>
);

在此迭代中，工具提示根本没有出现。 (codesandbox: 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}
    </>
  );
};

使用带浮动按钮的 chakra-ui 工具提示

Using chakra-ui ToolTip with a floating button

typescript

reactjs

chakra-ui