icon disappears when cursor is hovered over icon-CodePudding

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 onm ouseEnter={onHover} onm ouseLeave={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?

CodePudding user response：

Just move the icon outside the conditional

<div onm ouseEnter={onHover} onm ouseLeave={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.

CodePudding user response：

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 
       onm ouseEnter={onHover} 
       onm ouseLeave={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.