我有以下組件:

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverBody,
  Portal,
  Button,
} from "@chakra-ui/react";
import { ReactNode } from "react";
import { CopyIcon } from "@chakra-ui/icons";

export function SelectableTooltip({
  textComponent,
  label,
}: {
  textComponent: ReactNode;
  label: string;
}) {
  return (
    <Popover trigger="hover" openDelay={100}>
      <PopoverTrigger>{textComponent}</PopoverTrigger>
      <Portal>
        <PopoverContent>
          <PopoverBody>{label}</PopoverBody>
          <Button
            rightIcon={<CopyIcon />}
            size="sm"
            onClick={() => navigator.clipboard.writeText(label)}
          />
        </PopoverContent>
      </Portal>
    </Popover>
  );
}

它是這樣渲染的:

我希望按鈕在文本的右邊，而不是在文本的下面。

我嘗試過的一些事情:

<PopoverContent>
          <PopoverBody>
            {label}
            <Button
              rightIcon={<CopyIcon />}
              size="sm"
              onClick={() => navigator.clipboard.writeText(label)}
            />
          </PopoverBody>
        </PopoverContent>

我明白了。

這是不對的，我希望它是自己的一節，而不是與文本內聯。因此，類似于原來的布局，但在右邊，而不是在底部。

<PopoverContent flexDirection="row">
          <PopoverBody>{label}</PopoverBody>
          <Button
            rightIcon={<CopyIcon />}
            size="sm"
            onClick={() => navigator.clipboard.writeText(label)}
          />
        </PopoverContent>

我明白了。

這種溢出到盒子外面的方式也不是我想要的。

我如何讓圖標正確地出現在右邊？

你是說像這樣嗎？

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverBody,
  Portal,
  Button, Heading
} from "@chakra-ui/react";
import { ReactNode } from "react";
import { CopyIcon } from "@chakra-ui/icons";

export const App = () => {
  return (
    <Popover trigger="hover" openDelay={100}>
      <PopoverTrigger>
        <Heading>test
        </Heading>
      </PopoverTrigger>
      <Portal>
        <PopoverContent>
          <PopoverBody>
                <Heading>test
        </Heading>
          </PopoverBody>
          <Button
            width="min-content"
            p='4'
            ml='auto'
            rightIcon={<CopyIcon ml='auto' />}
            size="sm"
          />
        </PopoverContent>
      </Portal>
    </Popover>
  )
}