CODEWITHSUNDEEP
reactjstooltipreact-bootstrap
Marcelo Barbosa
Marcelo Barbosa

Reputation: 11

Tooltip from React-Bootstrap's OverlayTrigger appears after closing the Modal

Description: I'm using React-Bootstrap and encountering an issue with the OverlayTrigger. I have a button that opens a Modal, and the overlay for this button is a Tooltip. The problem is that after closing the Modal, the Tooltip instantly appears as if the mouse is still hovering over the button. I would like to know how I can prevent this undesired behavior.

Example code:

import React, { useState } from 'react';
import { OverlayTrigger, Tooltip, Button, Modal } from 'react-bootstrap';

const MyComponent = () => {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <OverlayTrigger
        overlay={<Tooltip>My Tooltip</Tooltip>}
        delay={{ show: 250, hide: 0 }}
      >
        <Button onClick={handleOpenModal}>Open Modal</Button>
      </OverlayTrigger>

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* Modal Content */}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleCloseModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default MyComponent;

Steps to reproduce the issue:

Open the Modal by clicking the "Open Modal" button. Close the Modal by clicking the "Close" button. Observe that the Tooltip appears instantly after closing the Modal.

Expected result:

The Tooltip should not appear after closing the Modal. The correct behavior would be to display the Tooltip only when the mouse is hovering over the button.

What I've tried:

I attempted to add an event to hide the Tooltip after closing the Modal, but I was not successful. I checked the React-Bootstrap documentation and searched forums and related discussions, but I couldn't find a solution for this specific issue.

Upvotes: 1

Views: 1663

Answers (1)

Ian A
Ian A

Reputation: 6163

The default behaviour of the trigger prop of OverlayTrigger is ['hover', 'focus'] so the tooltip will display both when hovered over and focussed on.

To change this so that you only get the tooltip on hover you can set the value of trigger to ['hover']:

<OverlayTrigger
  ...
  trigger={["hover"]}
>
  <Button onClick={handleOpenModal}>Open Modal</Button>
</OverlayTrigger>

There's a working demo here - when the close the modal the button still has focus, but the tooltip is not displayed unless you hover your mouse over the button.

Upvotes: 1

Related Questions