Showing popover using Bootstrap

Introduction

Redirecting to a new page for a single text-box filling is not a good idea. We can show popup to accomplish these kind of tasks. there are lot of Jquery Popup plugins which you can use according to your requirements. Today i will show you how to create a bootstrap popup. if you are already using bootstrap in your project then it is a good idea to reuse this plugin for this purpose. Ok lets begin

Create new Asp.net MVC project. Visual studio automatically add bootstrap required CSS and JS Files in your project.

Create a controller in controllers folder and add corresponding view. if you are using default theme which visual studio create for you at the time of project creation then a good news for you. Visual studio already add Bootsrap bundle reference in your main layout file. you can find this file under Shared->_Layout.cshtml. Below line of code make sure that your project contain Bootsrap reference.

     @Scripts.Render("~/bundles/bootstrap")
 

Now Add your view code

Razor View Code

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<a href="#" class="btn btn-primary btn-lg" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover Title" data-content="Content of Popover like a simple form etc.">Show popup</a>


<script type="text/javascript">

    $(document).ready(function () {

        $('[data-toggle="popover"]').popover();

    });

</script>

Code Explanation

data-toggle,data-content and data-trigger are HTML5 attributes tabindex defined the index of button in navigation. JQUERY code bind bootstrap popover function In DOM with each attribute contain data-toggle="popover".

Result

aspmvcsnippets.com bootstrap popover