How to Solve Bootstrap Tooltip disappearing inside a updatepanel control when a button is click or in postback in ASP.NET

hi...today ill like to share how to keep bootstrap tooltip from disappearing inside a updatepanel.

1st always use

 if (!Page.IsPostBack)
{
}
on page_load if you are using a UpdatePanel in asp website/application.

Ok lets add a UpdatePanel with two HTML input control and a Button.

 <asp:UpdatePanel ID="up_save" runat="server">
                                                            <ContentTemplate>
                                                                <div class="form-body">
                                                                    <div class="form-group" style="margin-bottom: 4px;">
                                                                        <label for="name" class="control-label">
                                                                            Name
                                                                        </label>
                                                                        <div class="input-group">
                                                                            <span class="input-group-addon"><i class="fa fa-fw ti-user"></i>
                                                                            </span>
                                                                            <input id="u_name" data-toggle="tooltip" data-placement="top" title="UserName." runat="server" class="form-control" type="text">
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group" style="margin-bottom: 4px;">
                                                                        <label for="inputAddress" class="control-label">
                                                                            Address
                                                                        </label>
                                                                        <div class="input-group">
                                                                            <span class="input-group-addon"><i class="fa fa-fw ti-credit-card"></i>
                                                                            </span>
                                                                            <input id="u_iadd" data-toggle="tooltip" data-placement="top" title="Address." runat="server" class="form-control" type="text">
                                                                        </div>
                                                                    </div>
<div class="form-group" style="margin-top: 18px;">
                                                                  
                                                                        <asp:Button ID="Button1" UseSubmitBehavior="false" OnClick="Button1_Click" CssClass="btn btn-animate btn-animate-side btn-warning m-r-50 btn-sm" runat="server" Text="Save Details" />
                                                                      
                                                                    </div>
                                                               </div>
                                                            </ContentTemplate>
                                                        </asp:UpdatePanel>

Here are our tooltips are :

data-toggle="tooltip" data-placement="top" title="UserName."    //Name

data-toggle="tooltip" data-placement="top" title="Address."     //Address


Lets add a js file for our tooltips

 <script>
        function openPopover() {
            $('#u_name').tooltip();
            $('#
u_iadd').tooltip();
     }
    </script> 


 and finally add this code in the onClick event on anywhere you want .!

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openPopover();", true);

and its DONE.!!!... Hope you 'all like it. Thank you.. Happy coding...and smoking.. :)

Comments

Popular posts from this blog

How to show multiple markers on Google maps from database in ASP.Net

Show Bootstrap Popup Modal from inside a Repeater in Asp.Net