Question 208287 in Html Question posted in
Some basic documentation can be found here.

Html – How to make clickable popover disappear if I clicked outside of it

I have this popover contain some info and URL to another page so when I clicked on it it’s open, but when I click outside of it it won’t disappear,

`<i class="bi bi-question-circle text-primary float-right" data-bs-toggle="popover" data-bs-content="{{$accountTypeQuestionMark[$value] ? $accountTypeQuestionMark[$value]:''}}" data-bs-trigger="click"  data-bs-html="true" ></i>
`

and this the JavaScript for it:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })
</script>

I tried using this code but it didn’t work:

$(document).on('click', function (e) {
    $('[data-bs-toggle="popover"]').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I used this script, it's worked :

    <script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})
document.addEventListener('click', function (event) {
var clickedInsidePopover = false;
for (var i = 0; i < popoverList.length; i++) {
    if (popoverList[i]._element.contains(event.target)) {
    clickedInsidePopover = true;
    break;
    }
}
if (!clickedInsidePopover) {
    for (var i = 0; i < popoverList.length; i++) {
    popoverList[i].hide();
    }
}
});</script>

  2. 0

    You are gonna have to make these changes in your popover for this functionality:
    tabindex="0" and change data-bs-trigger to focus. And in the end, it will look like this:

    <i class="bi bi-question-circle text-primary float-right" tabindex="0" data-bs-toggle="popover" data-bs-content="{{$accountTypeQuestionMark[$value] ? $accountTypeQuestionMark[$value]:''}}" data-bs-trigger="focus"  data-bs-html="true" >Click here for popover</i>

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})
    <!DOCTYPE html>
<i class="bi bi-question-circle text-primary float-right" tabindex="0" data-bs-toggle="popover" data-bs-content="{{$accountTypeQuestionMark[$value] ? $accountTypeQuestionMark[$value]:''}}" data-bs-trigger="focus"  data-bs-html="true" >Click here for popover</i>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search