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

Question

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

 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>
    ));
  };

注意：此下拉项嵌套在另一个下拉项中，我不确定这是否会影响工具提示的应用方式，但任何建议都会有所帮助。这是我第一次使用工具提示，这是我一直在寻找的文档 https://reactstrap.github.io/components/tooltips/[enter link description here]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} />);
};

它所做的只是 return 一堆 DropdownItemWithToolTip。渲染它是小菜一碟：

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

这里有一个沙盒供您使用：https://codesandbox.io/s/floral-architecture-01dv1?file=/src/App.js

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

I am trying to use a tool tip but not sure how to make the trigger work

reactjs

drop-down-menu

tooltip

reactstrap