Hide popup using HTML when clicking outside of it

Currently, I have implemented Bootstrap Popover with HTML content using the code snippet below. This code is based on the answer provided at .

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});

In order to close the popover when clicking outside of it, I have included the following code:

$('html').on('mouseup', function (e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function () {
                    $(this).closest('div.popover').popover('hide');
                });
            }
});

Although the current setup works well, I am encountering an issue when trying to open the popover again after closing it by clicking outside. It requires two clicks on the link to open the popover again.

I am seeking assistance in identifying what might be missing or causing the popover not to open in a single click after being closed by an external click. Any help would be appreciated!

UPDATE: My theory is that even though clicking outside hides the popover, Bootstrap still registers it as open. Hence, on the first click after closure, it assumes the popover is already closed, taking a second click to actually open it.

Answer №1

Take a look at this code snippet

$('html').on('click', function(e) {
  if (!$(e.target).is('.song-status-link') && $(e.target).closest('.popover').length == 0) {
    $(".song-status-link").popover('hide');
  }
});

Explore the example on JSFiddle for more details

Answer №2

To locate it, you must use the .find() method and ensure that it is visible/available in the Document Object Model by using :visible:

if ($(this).find('.tooltip:visible').length) {
    $('.tooltip').tooltip('hide');
}

Answer №3

You can achieve this functionality using Bootstrap without any additional plugins. The only limitation is that the popover cannot contain focusable elements.

Refer to the Dismiss on next click section in the official documentation for more information.

This feature relies on the focus event to show the popover and the blur event to hide it. When you click outside of the trigger element, a blur event is triggered which hides the popover.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery's .load() method is like including a file in a

Currently, Im working on revamping a company website that comes equipped with its very own CMS. Unfortunately, we are restricted from accessing the server configuration and FTP, which means I am limited to running only client-side files like HTML/CSS/J ...

Exploring the concepts of closure and scope

It seems that the function inResult always returns false and the loop is not being executed, probably due to a lack of understanding of closures. However, I can confirm that the result variable contains the correct properties. function hasId() {return ...

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

Mastering the art of flawlessly executing kerning-generated code

I am facing a problem while implementing logotext with kerning technique in the <header> element. I found a useful tool made by Mr. Andrew which can be accessed through this link. Before making any modifications, I had the following code in the heade ...

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

Ways to access a JavaScript object beyond the function scope

Using the code below, I am able to retrieve JSON data when an element is clicked. This data is then used to create a table, fill the cells with images, and append the table to a specific div. function LoadImagesByCategory() { $.getJSON("/Service/GetJs ...

What's the best way to fill in content for textarea and radio buttons?

I retrieved data from a database and stored it in the variable $tableRe. Now, I need to display these values in a textarea and also check the radio button. Below is my code snippet: $sql = "select (address, gender) from stud table"; if($result=mysqli_que ...

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

Ensure the padding and margin are both set to 0 when using inline styles

As someone who is not a designer, I attempted to send an email from PHP. In order to do so, I took a template and converted all styles to inline. However, I am unsure of where to include the universal margin and padding style in the template. *{margin:0px ...

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

Guide to performing a subdomain ajax request using jQuery (minus iFrames)

site.com/api/index.php is where the ajax request needs to go. While it works perfectly from site.com/sub/, it sends the request to sub.site.com/api/index.php from sub.site.com, which obviously does not exist. Despite researching extensively on Google and S ...

Transferring extra data from jQuery autocomplete to a PHP script

Hey there! I'm wondering if it's possible to pass extra parameters from jQuery autocomplete to a PHP page, which would then use them to query a database and return the results. While I know how to send the typed term from the input box, I'd ...

The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

In my current project, I am utilizing JavaScript to determine the length of a path and apply half of that length to the stroke-DashArray. However, I have encountered an issue as I am using vector-effect="non-scaling-stroke" in order to maintain a consisten ...

Issues arise when attempting to smoothly scroll to an anchor point in a webpage

While working on my website, I have encountered a challenge. The issue arises when dealing with multiple div items. Upon scrolling slightly, the entire page focuses on the div with a height of 100vh, which works perfectly fine. However, my attempts to ...

An unsolicited border encompassing an image that does not resemble a CSS border or outline within the realm of Bootstrap 4

Utilizing Bootstrap4 Cards with .PNG image sources has resulted in an unexpected border appearing. It's not a border or outline issue. https://i.sstatic.net/KHgnP.png Here is the HTML <div class="row"> <div class="col-md-3"> <d ...

Guide on how to confirm the successful sending of an email or track errors using Codeigniter AJAX

Is there a way to return a value back to AJAX from the controller once the email has been sent? Here is some code: In the following code, I would like to store flash data in the session and have it set under specific conditions to be called back in AJAX. ...

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

Randomly swap images in HTML when a button is clicked

In order to change images randomly on mouse click, I came across this solution: <SCRIPT LANGUAGE="Javascript"> function banner() { } ; b = new banner() ; n = 0 b[n++]= "<A HREF='index.html'><IMG SRC='images/pic1.jpg'> ...

How can we match the ID from the URL with the one stored in the database in order to display data specific to that particular ID in this code?

I'm currently working on a code snippet in the controller that displays a list of vacations for a specific employee based on their ID. public JsonResult GetVacationList(int? Id) { db.Configuration.ProxyCreationEnabled = false; List<Vacatio ...

Centering text using CSS Bootstrap

Hey everyone, I've been attempting to center my text using Bootstrap, but for some reason it's not working. Can someone help me figure out what's going on? <footer class="row p-1 mt-3 bg-primary text-white"> <p class= ...