将 Popover 选择限制为父组件

Question

我正在编写自己的弹出框组件，它将进行一些文本转换 https://pastecord.com/vegygawece.js。 <--- Popover component code It should work like this:

• 当用户选择某些文本时，我希望弹出窗口出现在该文本旁边（焦点或锚点位置）
• 我只想将其绑定到呈现 Popover 的组件 我当前的问题是我可以在页面上的任何位置触发 Popover 组件，我想将其限制在渲染它的组件上 父组件代码

import { Flex, Text } from "@chakra-ui/react";
import Popover from "../../components/popover";

function ResumeEditor() {
  return (
    <Flex bg="lightgrey" width="100%" height="100vh">
      <Text>
        this is an editorthis is an editorthis is an editorthis is an editorthis
        is an editorthis is an editorthis is an editorthis is an editorthis is
        an editorthis is an editorthis is an editorthis is an editorthis is an
        editorthis is an editorthis is an editorthis is an editorthis is an
        editorthis is an editorthis is an editorthis is an editor
      </Text>
      <Popover
        onTextSelect={() => {
          return;
        }}
      />
    </Flex>
  );
}

export default ResumeEditor;

Answer 1

您似乎正在使用 ChakraUI，因此您可以使用 ChakraUI 中的 ToolTip 组件。否则，如果您想使用纯 HTML 来实现它，您可以使用 title 标签。