在ASP.Net Repeater的jQuery Tooltip中显示Html内容

我有一个asp.net转发器，显示标题和图像。 图像显示基于我在转发器ItemDataBound事件中执行的一些计算。

我尝试使用jquery工具提示实现鼠标。 但我只能在工具提示中显示标题。 我想在工具提示中显示绑定到转发器的其他详细信息（errorcalls，totalcalls – 我使用这些细节在后面的代码中执行计算）。 任何人都可以帮助我做我应该做的事情吗？ 我有下面的代码。

转发器代码：

   
 <h5 class="ui-widget-header" title=" ">  9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>  
  
 
    

代码背后：

 protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls")); int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls")); float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100); if (Percentage == GetMaxMonitorThresholdValuebyLevelId(1)) { ((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level1.png"; } else if (Percentage >= GetMinMonitorThresholdValuebyLevelId(2)) { ((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level2.png"; } } } 

Javascript代码：

 $(function () { $(document).tooltip(); }); 

我使用以下css作为工具提示：

 .ui-tooltip { text-align: center; max-width: 180px; font: bold 12px "Helvetica Neue", Sans-Serif; } 

我使用下面的参考：

所以基本上工具提示目前在一行中显示标题的信息，如：

 ABC 

我想在多行中显示这样的内容：

 ABC PassPercentage = 100 

Answer 1

jQuery 工具提示不允许标题属性中的HTML标记开箱即用。

但是，您可以为每个文本（转发器项目）创建临时占位符。 然后在鼠标hover时将内容传递给工具提示。

        
 
 <%# Eval("Name").ToString().Length > 9 ? (Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%> 
 
  
 
 <%# Eval("Name") %>
 PassPercentage =  
 
    protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls")); int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls")); float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100); var literal = e.Item.FindControl("PassPercentageLiteral") as Literal; literal.Text = Percentage.ToString(); .... } } 

Answer 2

也许您需要使用jQuery UI Tooltip的自定义内容function： http ： //jqueryui.com/tooltip/#custom-content

使用$(this).is("h5")调用，如上例所示，在用户将鼠标hover在h5标记上时自定义内容。