Скачать или смотреть How to Make Your Clickable Popover Disappear When Clicking Outside

Discover how to implement a clean solution for a clickable popover that disappears when you click outside of it using JavaScript and Bootstrap.
---
This video is based on the question https://stackoverflow.com/q/76692615/ asked by the user 'kinan' ( https://stackoverflow.com/u/22199025/ ) and on the answer https://stackoverflow.com/a/76692903/ provided by the user 'Md. Rakibul Islam' ( https://stackoverflow.com/u/11037185/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to make clickable popover disappear if I clicked outside of it

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Make Your Clickable Popover Disappear When Clicking Outside

Popups, or popovers, have become a widely used component in modern web design, enhancing user experience by providing additional information without leaving the current page. However, one common issue developers face is ensuring that these popovers automatically close when a user clicks outside of them. This guide will guide you through a simple solution to achieve this behavior effectively using Bootstrap and JavaScript.

The Problem: Popover Doesn’t Disappear

Imagine you have a clickable icon that shows a popover containing information and links when clicked. However, once the popover opens, it just stays there, even after clicking outside of it. Here's a typical implementation of a popover that might be giving you this trouble:

[[See Video to Reveal this Text or Code Snippet]]

The attached JavaScript initializes the popover, but it does not handle making it disappear upon clicking outside.

Existing JavaScript

[[See Video to Reveal this Text or Code Snippet]]

The Issue with the Current Solution

You might have tried a jQuery solution to hide the popover when clicking outside it, and it still didn't work. The code might look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Unfortunately, this solution often fails due to various reasons, such as conflicts in event handling or incorrect targeting.

The Solution: Modifying Your Popover Settings

Step 1: Adjust the HTML Markup

To achieve the desired effect, you need to make a couple of slight adjustments to your HTML:

Add tabindex="0": This will allow the popover to be focusable, which is crucial for making it disappear when you click outside.

Change data-bs-trigger to focus: This change will ensure that the popover opens on focus (i.e., when clicked) and closes when it loses focus (when you click outside).

Here's how your icon will look after the changes:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Updated JavaScript Initialization

Make sure your JavaScript remains similar to what you had, but ensure it's properly set up to handle the new configuration.

[[See Video to Reveal this Text or Code Snippet]]

Final Implementation Example

Here’s the complete code example you should have after implementing these changes:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By modifying the tabindex and data-bs-trigger attributes of your popover, you can enhance your web application by making its popovers disappear seamlessly when the user clicks outside them. This small tweak not only improves user experience but also ensures your popovers behave as expected.

Now, you can easily implement this functionality in your projects and contribute to a more polished and interactive user interface! If you have any more questions about popovers or other UI elements, feel free to ask below.