React Tooltip doesn't show on hover

Question

Component -

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

Tooltip Code -

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

Any idea why doesnt it appear on hover? Thanks.

Answer 1

Solved it, the data-for and data-top attributes must be on a div, not a react component, like so:

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