Bootstrap-Popover : An Overview

Introduction

In this article I am going to explain about Bootstrap Popover window. Popover as its name suggests is a small modal window which will pop up like notification window on click event of any targeted control like button etc. We can use the Popover to show additional information for a button or any other controls.

Prerequisites:

Before we start using the Bootstrap Popover control, you need to ensure that we have added the necessary Bootstrap references files in your page. You can either use online cdn of Bootstrap files available in internet. If you don’t want to use the files available online then you can download the files from the server and add it to your solution. I have explained the steps to add files manually in detail here.

Add the below files to your solution

<%--Jquery reference files--%>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<%--Bootstrap CSS Files--%>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<%--Bootstrap Js files--%>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Usage:

You can attach the Popover to your button control like given below

<script>
        $(function () {
            //Attach Popover functionality to your button
            $('#Button1').popover();
        });
    </script>

Setting the Title and Content of Popover

To set the Title and Content of your Popover you can use the Title and data-content of your button control like given below

<asp:Button ID="Button1" runat="server" OnClientClick="return false;" class="btn btn-primary" Text="PopOver Sample" 
            title="Popover title" data-content="Sample PopOver Content" />

Alignment of Popover:

You can use the data-placement attribute to set the position where you want the Popover to display.

Four options available for data-placement attribute are

  • top
  • bottom
  • left
  • right
<asp:Button ID="Button1" runat="server" OnClientClick="return false;" class="btn btn-primary" Text="PopOver Sample" 
title="Popover title" data-content="Sample PopOver Content" data-placement="bottom" />

Dismiss the Popover on Next click:

Usually Popover will get close when we click on the same control which triggered the Popover. However you can close the Popover when user click other than control. You need to set the tabindex and data-trigger property of button control.

<asp:Button ID="Button1" runat="server" OnClientClick="return false;" class="btn btn-primary" Text="PopOver Sample" title="Popover title" data-content="Sample PopOver Content" data-placement="bottom" tabindex="0" data-trigger="focus" />

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: