我有一个显示工具提示的脚本
function BindToolTip(){
$('.toolTip').hover(
function () {
this.tip = this.title;
$(this).append(
'<div class="toolTipWrapper">'
+ '<div class="toolTipTop"></div>'
+ '<div class="toolTipMid">'
+ this.tip
+ '</div>'
+ '<div class="toolTipBtm"></div>'
+ '</div>'
);
this.title = '';
this.width = $(this).width();
$(this).find('.toolTipWrapper').css({ left: this.width - 22 })
$('.toolTipWrapper').fadeIn(300);
},
function () {
$('.toolTipWrapper').fadeOut(100);
$(this).children().remove();
this.title = this.tip;
}
);
}
aspx文件看起来像:
<asp:UpdatePanel ID="UpdatePanelAddNews" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(BindToolTip);
</script>
<div class="toolTip" title="This is a simple tooltip made with jQuery"></div>
<asp:UpdatePanel ID="UpdatePanelDate" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownListYearStart" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="OnSelectedStartDateChanged" CssClass="dropdown"> </asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
当我悬停div时,它会正确显示工具提示,但在使用下拉列表进行回发后,当我第一次悬停div时,它会显示两个工具提示,一个是空的,其他工具提示带有第一个后面的文本。当我第二次悬停时,它只显示空的工具提示。我知道如果我删除行:this.title ='';从脚本它将工作正常,但它是goint显示两个工具提示,我的自定义工具提示和默认的Windows工具提示。怎么解决?
答案 0 :(得分:1)
在ContentTemplate的最后编写脚本。像,
<asp:UpdatePanel ID="UpdatePanelAddNews" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div class="toolTip" title="This is a simple tooltip made with jQuery"></div>
<asp:UpdatePanel ID="UpdatePanelDate" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownListYearStart" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="OnSelectedStartDateChanged" CssClass="dropdown"> </asp:DropDownList>
<script type="text/javascript">
Sys.Application.add_load(BindToolTip);
</script>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
希望它有所帮助。 如果它解决了你的问题,不要忘记投票。 谢谢.. :))