How to hide bootStrap popover when user click(s) outside the popover?

Hiding bootStrap popover when user click(s) outside the popover

Recently I have experienced this problem i.e., hiding the popover when we click outsode the popover.I have worked on it and fixed the issue.So,I thought to share this fix.

For more detail(s) about the bootStrap please refer this link PopOver


popover plugin has a property called "trigger" of type String with default event as "click" and popover can be triggered by click/hover/focus/manual. 

To show the popover we need to prepare the HTML mark-up as given below

<div class="btn-group">
        <div class="btn-group" id="ddlSelected" style="clear: both;">
            <button class=
            "btn btn-primary btnSelectedStyle selectedBorderStyle" type=
            "button">Your selected Items (<b id=
            "lblSelectedItemCount">0</b>)</button> <button class=
            "btn btn-primary dropdown-toggle selectedBorderCaratStyle"
            data-toggle="dropdown" type="button"><span class=
            "caret"></span></button>
        </div>

        <div class="popover-content" id="divContent" style=
        "display: none; white-space: nowrap"></div>
    </div>
 
 To Show the popover on click we need to write JS like this 
 
 $("#ddlSelected").popover({
        trigger: 'manual',
        placement: 'bottom',
        title: 'Selected Item(s)',
        container: 'body',
        animation: true,
        html: true,
        //delay: { show: 200 },
        content: function () {
            return $("#divContent").html();
        } //content that is displayed
    }).on("click", function (evt) {
        evt.stopPropagation();
        $("#ddlSelected").popover('show');        
    });
To hide the popover when user click other than popover Div
$('html').click(function () {
        if ($(".popover").length) {
            $("#ddlSelected").popover('hide');
        }
    });
I have seen in many forums developers are working hard to hide the popover when click outside the popover.I wish this article will be helpful and happy coding. :-)

Popular posts from this blog

Exporting to excel from a custom class object using C#.NET

Get the Clicked Cell Value and Column Name of GridView in ASP.NET

How to apply watermark to the textbox and dropdownlist?