Examples to Use Bootstrap Tooltip 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 tooltip in Asp.Net with example. I have demonstrated the use of bootstrap tooltip 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 tooltip e.g. title, data-placement, data-trigger, data-html etc.

In previous article i explained how to Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover the Cell and Show animated bootstrap alert messages in asp.net and Show and auto close bootstrap alert messages after few seconds in asp.net and Maintain bootstrap selected tab on postback in asp.net and Show jquery tooltip message on mouse over on asp.net controls

Description: A tooltip 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 tooltip but here I have made use of bootstrap tooltip in following examples.

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

HTML source:

//Initialize tooltip with jQuery

$(document).ready(function () {

$('.tooltips').tooltip();

});

</script>

</head>

<body>

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

<a href="#" class="tooltips" data-placement="top" title="Tooltip on top">Top tooltip</a>

<a href="#" class="tooltips" data-placement="bottom" title="Tooltip on bottom">Bottom tooltip</a>

<a href="#" class="tooltips" data-placement="left" title="Tooltip on left">Left tooltip</a>

<a href="#" class="tooltips" data-placement="right" title="Tooltip on right">Right tooltip</a>

<br />

<b>Tooltip on Buttons:</b>

<asp:Button ID="btnTop" runat="server" Text="Top tooltip" CssClass="btn btn-success btn-sm tooltips" data-placement="top" title="Tooltip on top" />

<asp:Button ID="btnBottom" runat="server" Text="Bottom tooltip" CssClass="btn btn-warning btn-sm tooltips" data-placement="bottom" title="Tooltip on bottom" />

<asp:Button ID="btnLeft" runat="server" Text="Left tooltip" CssClass="btn btn-info btn-sm tooltips" data-placement="left" title="Tooltip on left" />

<asp:Button ID="btnRight" runat="server" Text="Right tooltip" CssClass="btn btn-danger btn-sm tooltips" data-placement="right" title="Tooltip on right" />

<br />

<b>Tooltip on Labels:</b>

<asp:Label ID="lblTop" runat="server" Text="Top tooltip" CssClass="tooltips" data-placement="top" title="Tooltip on top"></asp:Label>

<asp:Label ID="lblBottom" runat="server" Text="Bottom tooltip" CssClass="tooltips" data-placement="bottom" title="Tooltip on bottom"></asp:Label>

<asp:Label ID="lblLeft" runat="server" Text="Left tooltip" CssClass="tooltips" data-placement="left" title="Tooltip on left"></asp:Label>

<asp:Label ID="lblRight" runat="server" Text="Right tooltip" CssClass="tooltips" data-placement="right" title="Tooltip on right"></asp:Label>

</div>

</form>

</body>

</html>

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

Tooltip Attributes:

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

title: the text that will appear in tooltip.

data-placement : Tooltip 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 tooltip.

If we set the data-placement="auto right" then browser will display tooltip on right when possible otherwise on left side. Similary if data-placement="auto right" then browser will display tooltip 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 tooltip will trigger i.e. on what event tooltip will show.To trigger tooltip on click set data-attribute="click" and to trigger tooltip on hover set data-placement="hover" and to trigger tooltip 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 tooltip on click as well as on hover.

For example:

<a href="#" class="tooltips" title="Tooltip on click" data-placement="top" data-trigger="click">Click me</a>

<a href="#" class="tooltips" title="Tooltip on hover" data-placement="left" data-trigger="hover">Hover on me</a>

<a href="#" class="tooltips" title="Tooltip on focus through tab or click" data-placement="right" data-trigger="focus">Focus (tab or click)</a>

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

For example:

<asp:Button ID="btnToolTipDemo" runat="server" Text="Tooltip Demo" CssClass="btn btn-success btn-sm tooltips" data-html="true" title="<b><i><u>HTML tags in Tooltip</u></i></b>" data-placement="top" />

In above example tooltip 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 Tooltip in Asp.net

Related Post