3

I use Bootstrap Tooltip in my project, and an update panel too.

After postback, the Bootstrap Tooltip doesn't show up again.

How I can fix it?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
mohamad hosein ghelich khani
  • 103
  • 1
  • 12
  • Take a look at [this](https://stackoverflow.com/a/30142567/4977870) – Anas Alweish Oct 14 '18 at 05:51
  • Check my answer here. It is about a DatePicker but the cause and solution are the same. https://stackoverflow.com/questions/48960734/how-to-add-datepicker-in-asp-net-gridview-control – VDWWD Oct 14 '18 at 09:43

2 Answers2

2

Please consider this solution: How to Solve Bootstrap Tooltip disappearing inside a updatepanel control when a button is click or in postback in ASP.NET I will bring you the highlights:

first always use:

if (!Page.IsPostBack)
{
}

on page_load() method if you are using a UpdatePanel in asp website/application.

second, let's add the html: 

 <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>

Now let's add JS:

 <script>
        function openPopover() {
            $('#u_name').tooltip();
            $('#u_iadd').tooltip();
     }
    </script>
Barr J
  • 10,636
  • 1
  • 28
  • 46
0
<script>
function pageLoad() {
      $('[data-toggle="tooltip"]').tooltip();
      $('[data-toggle="popover"]').popover();
}
</script>

Add that code to your web form / master page.

Leo
  • 398
  • 6
  • 11