悬停时不显示 React 工具提示

Question

组件 -

<InfoCard
     count={passengersCount}
     text={`${t('dailyPassengers')}`}
     data-for="dailyPassengers"
     data-tip
/>

工具提示代码 -

    <ReactTooltip
          id="dailyPassengers"
          place="right"
          type="light"
          borderColor="gray"
          border
    >
           <p>hi</p>
      </ReactTooltip>

知道为什么悬停时不显示它吗？谢谢

Answer 1

解决了， data-for 和 data-top 属性必须在 div 上，而不是反应组件，像这样：

const InfoCard = ({
   count,
   text,
   margin,
   tooltipId,
}: Props): JSX.Element => {
   return (
      <Card margin={margin}>
         <div data-for={tooltipId} data-tip>
            <CountText>{count}</CountText>
            <Text>{text}</Text>
         </div>
      </Card>
   );
};

悬停时不显示 React 工具提示

React Tooltip doesn't show on hover

reactjs

react-tooltip