Create Tooltip using jQuery in Asp.Net with Example

By Unknown 5/14/2013 , 1 comment
In this tutorial, we study how to add tooltip and how to add tooltip using jQuery in Asp.Net Control.

In this demo, I have used jQuery Twitter Bootstrap plugins to create tooltip in Asp.Net.

In Asp.Net Website, First you have tooltip jQuery plugins and CSS. We have include all jQuery and CSS required for this project to demo source code. To add plugins just copy js, img and css folder from the demo source code and add to your website root as shown below -

Create Tooltip using jQuery in Asp.Net

Now, You can include jQuery and css as follow in your website page -

<head runat="server">
    <title>ToolTip Demo</title>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/tooltip.min.js" type="text/javascript"></script>
    <link href="css/tooltip.min.css" rel="stylesheet" type="text/css" />
</head>

Default.aspx

 Add Tooltip title as shown below code in Asp.Net Control -

            <asp:HyperLink ID="LinkButton1" NavigateUrl="#" runat="server" rel="tooltip" ToolTip="Tooltip Example">LinkButton ToolTip</asp:HyperLink>

Now, Apply jQuery to above Asp.Net control as follow to add interactivity to tooltip -

<script type="text/javascript">
        $(function () {
            $("#LinkButton1").tooltip({ placement: 'Top' });
        });
    </script>

Below script will target every link under #container with rel=tooltip;

<script type="text/javascript">
        $(function () {
            $('#container').tooltip({
                selector: "a[rel=tooltip]"
            });
        });
</script>
<p id="container">
            Jujubes icing oat cake <a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop
                tiramisu</a>. Tiramisu sesame snaps croissant chupa chups chupa chups chocolate
            cake candy sugar plum jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding.
            Oat cake topping gummi bears oat cake. Muffin jelly-o cake sesame snaps ice cream
            cotton candy.
</p>


Demo

Create Tooltip using jQuery in Asp.Net

Download Demo Source Code




1 comment: