Bootstrap tooltip color changed when inside the updatePanel

user_13157208 0
Viewed 50

I am using bootstrap tooltip that has black background and white letters on it. The entire tooltip and radiobutton is inside the update panel. when I click on the radio button and postback occurs, tool tip looses the black background and becomes white. I am not sure what am I doing wrong. I have several controls inside the update panel so I dont want to use seperate update panel for each control. Below is my code:

<script>

        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
    <asp:UpdatePanel ID="updatePanel1" runat="server">
        <ContentTemplate>
        <button class="btn btn-default" data-toggle="tooltip" data-placement="right" title="A Multi-Titled document is written in such a way that it performs multiple functions simultaneously. (e.g., Deed of Trust and Assignment of Rents; Substitution of Trustee and Reconveyance) ">
                      <img src="../Images/InfoOrange.png" width="26" />
                  </button>
<asp:RadioButton ID="rdbtest1" runat="server" Text="Test1" OnCheckedChanged="test100" AutoPostBack="true" />
 <asp:RadioButton ID="rdbTest2" runat="server" Text="test2" OnCheckedChanged="test100" AutoPostBack="true" />
    <asp:TextBox ID="txtTest1" runat="server" Visible="false"></asp:TextBox>
            </ContentTemplate>
        </asp:UpdatePanel>

below is the image of the tooltip and radio button before postback:

enter image description here

any help will be highly apprecaited.

asp.net ajax
1 Answers

After each update on UpdatePanel you need to initialize again your JavaScript.

UpdatePanel gives the pageLoad() function that is called on each update - so you can use this for init, and re-init your javascript. So just change your code to this.

function pageLoad()
{
    $('[data-toggle="tooltip"]').tooltip();
}
user_1592700
Related