Bootstrap 5: How can I prevent tooltip from displaying after a modal closes

Question

I have a button with a Bootstrap 5 tooltip which when clicked opens a modal.

The tooltip is displayed correctly when the mouse is over the button and when the button is clicked, the modal opens correctly and the tooltip is no longer displayed. However when the modal closes, the tooltip reappears.

I'd prefer that the tooltip does not appear after the modal closes, any suggestions on how to do that?

Answer 1

If anyone is using UncontrolledTooltip from reactstrap, the solution is simply add trigger={"hover"} (the default is "hover focus"). Focus returned by modal close is what's causing the issue for me.

<UncontrolledTooltip trigger={"hover"} placement={"top"} target={"your_target_id"}>
    Tooltip Content
</UncontrolledTooltip>

If you're not using UncontrolledTooltip from reactstrap, maybe the focus issue can guide as a hint, as maybe that's also what's causing the issue on your side.

Answer 2

by adding only "hover", every tooltip will display a warning in your console: [react-bootstrap] Specifying only the "hover" trigger limits the visibility of the overlay to just mouse users. Consider also including the "focus" trigger so that touch and keyboard only users can see the overlay as well. I'am trying to find a solution without display those warnings