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.. :)
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
Post a Comment