'How to disable popover when hovered over another card in react js

I'm trying to build course cards in which when hovered to any course card a popover should appear and popover is visible till when i hover on card and popover itself. And when I hover over to next card previous popover should be removed and current hovered card popover should appear.But when hover over another card previous pop over still exist. enter image description here

Used package called react-tiny-popover react-tiny-popover

Below is the code snippet

<Popover
  isOpen={isPopoverOpen}
  positions={['right', 'left', 'top', 'bottom']}
  padding={10}
  align="center"
  width={200}
  onClickOutside={() => setIsPopoverOpen(false)}
  reposition="true"
  content={({ position, childRect, popoverRect }) => (
    <ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
      position={position}
      childRect={childRect}
      popoverRect={popoverRect}
      arrowColor={'white'}
      arrowSize={10}
      arrowStyle={{ opacity: 0.7 }}
      className='popover-arrow-container'
      arrowClassName='popover-arrow'
    >
      <div
        style={{ backgroundColor: 'white', color: '#170055', padding: '10px', borderRadius: '5px', width: '300px', height: '400px', lineHeight: '1.5' }}
        onClick={() => setIsPopoverOpen(!isPopoverOpen)}
      >
        <div class="popover-text">
          <h1 style={{ fontSize: '20px' }}>Lorem ipsum.</h1>
          <h2 style={{ fontSize: '14px' }} class="course-instructor">Dr. Murthy</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula rhoncus metus non condimentum. Int</p>
          <ol>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula rhoncus metus non condimentum. Int</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula rhoncus metus non condimentum. Int</li>
          </ol>
          <button className="course-button">Add to Cart</button>
        </div>
      </div>
    </ArrowContainer>
    )}
    >
      <div class="tile" onMouseOver={() => setIsPopoverOpen(!isPopoverOpen)} >
        <Link to={props.page}>
          <img src='../../assets/images/courses-01.jpg' alt="ssd" />
          <div class="text">
            <h1>Lorem ipsum.</h1>
            <h2 class="course-instructor">Dr. Murthy</h2>
            <p className="course-price">Rs. 400</p>
          </div>
        </Link>
      </div>
</Popover>
reactjshoverpopover


Solution 1:[1]

Try to add

onMouseLeave={() => setIsPopoverOpen(false)}

for div class="tile"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suraj Rao

Related Questions