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