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. :-)
Location: Hyderabad, Andhra Pradesh, India

Comments

Post a Comment

Popular posts from this blog

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

We may face a scenario to export the data of custom class object to excel using InterOp .You can get the property name's from the class object using Reflection.Create a work sheet header by reading the each propety of the class object.I have created a separate method to get the all properties into a list collection of string as given below         ///         /// Get the list of Properties Name into a list collection.         ///         ///         ///         public List GetPropeties(Employee objEmployee)         {             Type myType = objEmployee.GetType();             IList props = new List (myType.GetProperties());             List lstPropertiesNames = new List ();             foreach (PropertyInfo prop in props)             {                 lstPropertiesNames.Add(prop.Name);             }             return lstPropertiesNames;         } We need to call this method to create the worksheet header's as given beloe                 List lstProperties = GetPropet
Read more

Why Dispose() is preferred than Finalize() for Un-Managed Resources in .NET?

Image
Memory management is very important in any application development.The Garbage collector of .NET does almost all clean up activity for your objects.For unmanaged resources (Ex:Windows API created objects, File, Database connection objects, COM objects, etc.) are outside the scope of .NET framework. Why Dispose() is preferred than Finalize() If we use the " Finalize() " method,the  Garbage collector has to make two round in order to remove the objects. For an instance ,let me explain clearly if we have two objects as Object1 and Object2 and we finalize the Object2 as given in the below image.The GC has to categorize the two objects and put the Finalize objects into Finalization Queue.The GC will clean the object1 which doesn't use the Finalize() method and process the second round of cleaning the Finalization Queue. Now at this the " Dispose() " method will come into picture.This method belongs to IDisposable() interface .So the best practise to rele
Read more

How to apply watermark to the textbox and dropdownlist?

Create a watermark effect on your TextBox and display instructions to users, without taking up screen space.This warkmark style can applied by using the CSS and append this to your control using jquery. Hi this is basic where we you use to get to apply watermark to the Textbox or DropDown.I have implemented this by using the jquery. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WaterMark.aspx.cs" Inherits="WaterMark" %> < html xmlns ="http://www.w3.org/1999/xhtml"> < head runat ="server">      < title > Water Mark using jquery title >      < style type ="text/css">         .watermarkOn         {             color: #CCCCCC;             font-style: italic;         }       style >      < script type ="text/javascript" src ="http://code.jquery.com/jquery-1.4.1.js"> script >      < script ty
Read more