reactjs 自定义容器内的材质UI工具提示

jaql4c8m 于 2023-05-22 发布在 React

关注(0)|答案(1)|浏览(136)

我正在使用React和Material UI开发一个Chrome扩展。我正在使用一个注入页面策略。我正在显示Fab按钮的工具提示，但它显示在我的扩展DOM之外。我在inspect元素中看到它正在附加到body。如何定义工具提示的放置容器，使其位于扩展div中？
下面是inspect元素。如图所示，工具提示div被附加到body。我的扩展div是我的扩展的div。

下面是代码

import Tooltip from '@material-ui/core/Tooltip';

<Tooltip title="Dialpad">
    <Fab color="primary" size="medium" aria-label="add" className={classes.fab}>
        <DialpadIcon />
    </Fab>
</Tooltip>

my-extension-root是扩展页面的div。

reactjs

来源：https://stackoverflow.com/questions/61414697/material-ui-tooltip-inside-custom-container

1条答案

按热度按时间

hvvq6cgz1#

创建一个refertocontainer元素，您希望在dom中放置工具提示代码，然后使用PopperProps将该容器分配给工具提示，如以下代码所示。
创建参照

const containerElement = useRef()

将ref赋值给容器元素。

return (<div ref={containerElement}>
.
.
.
</div>)

在ref的帮助下将容器元素分配给工具提示。

<Tooltip title="Dialpad" PopperProps={{container: containerElement.current}}>
    <Fab color="primary" size="medium" aria-label="add" className={classes.fab}>
        <DialpadIcon />
    </Fab>
</Tooltip>

赞(0）回复(0）举报 2023-05-22

我来回答

reactjs 自定义容器内的材质UI工具提示

1条答案

相关问题

热门标签

最新问答