Examples to use Bootstrap Popover in Asp.Net ~ Asp.Net,C#.Net,VB.Net,MVC,jQuery,JavaScipt,AJAX,WCF,Sql Server example

Introduction: In this article I am going to share how to implement or use twitter bootstrap popover in Asp.Net with examples. I have demonstrated the use of bootstrap popover on HTML anchor tag, Asp.Net label and button controls. But it can be added on any HTML and Asp.Net control. I have demonstrated the use of some important attributes of bootstrap popover e.g. title, data-content, data-placement, data-trigger, data-html etc.

Description: A popover is basically a text that appears in popup when the mouse pointer hovers over the text or control to provide some detail or describe something. There are various methods to show popover but here I have made use of bootstrap popover in following examples.

Implementation: Let’s create a web page for demonstration purpose:

HTML Source:

//Initialize popover with jQuery

$(document).ready(function () {

$('.popovers').popover();

});

</script>

</head>

<body>

<b>Popover on anchor tag:</b>

<a href="#" class="popovers" data-placement="top" data-trigger="hover" title="Title here" data-content="Your message here..">Popover on Top</a>

<a href="#" class="popovers" data-placement="bottom" data-trigger="hover" title="Title here" data-content="Your message here..">Popover on Bottom </a>

<a href="#" class="popovers" data-placement="left" data-trigger="hover" title="Title here" data-content="Your message here..">Popover on Left</a>

<a href="#" class="popovers" data-placement="right" data-trigger="hover" title="Title here" data-content="Your message here..">Popover on Right</a>

<br />

<b>Popover on Buttons:</b>

<asp:Button ID="btnTop" runat="server" Text="Popover on Top" CssClass="btn btn-success btn-sm popovers" data-trigger="hover" data-placement="top" title="Title here" data-content="Your message here.." />

<asp:Button ID="btnBottom" runat="server" Text="Popover on Bottom" CssClass="btn btn-warning btn-sm popovers" data-trigger="hover" data-placement="bottom" title="Title here" data-content="Your message here.." />

<asp:Button ID="btnLeft" runat="server" Text="Popover on Left" CssClass="btn btn-info btn-sm popovers" data-trigger="hover" data-placement="left" title="Title here" data-content="Your message here.." />

<asp:Button ID="btnRight" runat="server" Text="Popover on Right" CssClass="btn btn-danger btn-sm popovers" data-trigger="hover" data-placement="right" title="Title here" data-content="Your message here.." />

<br />

<b>Popover on Labels:</b>

<asp:Label ID="lblTop" runat="server" Text="Popover on Top" CssClass="popovers" data-trigger="hover" data-placement="top" title="Title here" data-content="Your message here.."></asp:Label>

<asp:Label ID="lblBottom" runat="server" Text="Popover on Bottom" CssClass="popovers" data-trigger="hover" data-placement="bottom" title="Title here" data-content="Your message here.."></asp:Label>

<asp:Label ID="lblLeft" runat="server" Text="Popover on Left" CssClass="popovers" data-trigger="hover" data-placement="left" title="Title here" data-content="Your message here.."></asp:Label>

<asp:Label ID="lblRight" runat="server" Text="Popover on Right" CssClass="popovers" data-trigger="hover" data-placement="right" title="Title here" data-content="Your message here.."></asp:Label>

</div>

</form>

</body>

</html>

Explanation: To apply popover on any control whether HTML or Asp.Net control, we just need to add class="popovers" in case of HTML controls and CssClass="popovers " in case of Asp.Net controls as I have used in above examples.

Popover Attributes:

Below are the explanations of the attributes I have used in above examples.

title: It is the header text that will appear at top in popover.

data-content: It is the text inside the popover's body.

data-placement : popover position can be set using the data-placement attribute which has possible values: top, bottom, left , right, auto. In above example I have demonstrated the left, right, top, bottom placement of popover.

If we set the data-placement="auto right" then browser will display popover on right when possible otherwise on left side. Similarly if data-placement="auto right" then browser will display popover on top when possible otherwise on bottom.

If we don’t specify the data-placement attribute then the default placement is top of the text.

data-trigger : It specifies how popover will trigger i.e. on what event popover will show. To trigger popover on click set data-attribute="click" and to trigger popover on hover set data-placement="hover" and to trigger popover on focus (i.e. on focus by tab or click) set data-placement="focus". We can also set multiple triggers e.g. data-placement=”click hover” if we want to trigger popover on click as well as on hover.

data-html : It specifies whether to accept HTML tags in popover or not. Default is false. So if you want to format your popover text using HTML then set data-html="true".

For example:

<asp:Button ID="btnPopoverDemo" runat="server" Text="Popover Demo" CssClass="btn btn-success btn-sm popovers" data-trigger="hover" data-html="true" title="Title here" data-content="<b><i><u>Your message here..</u></i></b>" data-placement="top" />

In above example popover message text will be bold, italic and underlined.

Now over to you:A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..

Examples to use Bootstrap Popover in Asp.Net

Related Post