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

Posted 2023-03-23

【中文标题】我正在尝试使用工具提示，但不确定如何使触发器工作

【英文标题】：I am trying to use a tool tip but not sure how to make the trigger work

【发布时间】：2021-06-07 21:52:06

【问题描述】：

我希望我的工具提示在悬停时显示我正在使用 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 此处的链接描述]1

【参考方案1】：

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

您需要将每个带有工具提示的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