What I am trying to do is; Opening a tooltip when hovering over the icon. I managed to do this, but I don't want the icon to disappear when the cursor hovers over the icon.
const [hover, setHover] = useState(false);
const onHover = () => {
setHover(true);
};
const onLeave = () => {
setHover(false);
};
<div onMouseEnter={onHover} onMouseLeave={onLeave}>
{hover ? <InstallmentInformation installmentList={props.location.state.toBePaidList}/> : <AS.InfoIcon />} //AS.InfoIcon--> My icon
</div>
What can I do so that the icon does not disappear?
Just move the icon outside the conditional
<div onMouseEnter={onHover} onMouseLeave={onLeave}>
<AS.InfoIcon />
{hover && <InstallmentInformation installmentList={props.location.state.toBePaidList}/> }
</div>
I'm expecting hover to always be a boolean, if it's not make it a boolean by using !!hover to avoid unexpected behavior.
I don't know what kind of effect/positioning you want for your tooltip but since you icon should not disappear , it should not be conditioned. Try to start with something like that :
<div
onMouseEnter={onHover}
onMouseLeave={onLeave}>
{hover && <InstallmentInformation
installmentList={props.location.state.toBePaidList}/>}
<AS.InfoIcon />
Plus, the style of your tooltip should contain a position property sets to 'absolute' and then place it where you want.