我正在尝试使用工具提示，但不确定如何使触发器工作

Question

我希望我的工具提示在悬停时显示 我正在使用reactraptooltip并一直在查看它的文档，但我似乎无法获得工具提示来调用我的函数来设置显示状态。这是我的代码：

const PracticesList = () => {
const [isShown, setIsShown] = useState(false);
const toggleToolTip = () => {
console.log("MADE IT");
setIsShown(!isShown);
};
return allPractices.map((p) => (
<DropdownItem
key={p.id}
toggle={false}
tag="div"
className={styles.submenuItem}
onClick={() => {
// only switch the practice if the practice selection has changed
if (currentUser.currentPracticeID != p.id) {
onSwitchPractice(p.id);
}
setMainDropdownOpen(false);
}}
>
<span
style={{ width: "300px", backgroundColor: "black", color: "blue" }}
href="#"
id="Tooltip"
>
{p.name}
</span>
<Tooltip
placement="right"
trigger="hover"
isOpen={true}
target="Tooltip"
toggle={toggleToolTip()}
>
{p.name}
</Tooltip>
</DropdownItem>
));
};

注意：此下拉项嵌套在另一个im中，不确定这是否会影响工具提示的应用方式，但任何建议都会有所帮助。这是我第一次使用工具提示，这是我一直在寻找的文档 https://reactstrap.github.io/components/tooltips/[在此处输入链接描述]1

Answer 1

您似乎希望在将鼠标悬停在DropdowItem元素上时触发工具提示。这个想法可能有多个DropdownItem，每个都将与工具提示相关联。

您需要将每个DropdownItem元素及其工具提示隔离到其自己的组件中，这将非常有用，因为它们相应的工具提示需要能够管理自己的状态。这是这个想法：

const DropdownItemWithToolTip = (props) => {
const [tooltipOpen, setTooltipOpen] = useState(false);
const toggle = () => setTooltipOpen(!tooltipOpen);
return (
<div>
<DropdownItem key={props.id} toggle={false} tag="div">
<span href="#" id={"tooltip-" + props.id}>
{props.name}
</span>
</DropdownItem>
<Tooltip
placement="right"
trigger="hover"
isOpen={tooltipOpen}
target={"tooltip-" + props.id}
toggle={toggle}
>
{props.name}
</Tooltip>
</div>
);
};

然后，您的PracticesList元素可以像以下这样简单：

const PracticesList = () => {
return allPractices.map((p) => <DropdownItemWithToolTip key={p.id} {...p} />);
};

它所做的只是返回一堆DropdownItemWithToolTips.渲染它是小菜一碟：

return (
<div>
<h3>Tooltip</h3>
<PracticesList />
</div>
);

这是适合您的沙盒： https://codesandbox.io/s/floral-architecture-01dv1?file=/src/App.js