在ASP.Net Repeater的jQuery工具提示中显示HTML内容

Question

我有一个显示标题和图像的asp.net中继器。 该图像基于我在转发器ItemDataBound事件中所做的一些计算而显示。

我试图使用jquery tooltip实现鼠标悬停。 但是我只能在工具提示中显示标题。 我也想在工具提示中显示绑定到转发器的其他详细信息（错误调用，总计调用-我使用这些详细信息在后面的代码中执行计算）。 谁能帮助我该怎么办？ 我有下面的代码。

转发器的代码：

<asp:Repeater ID="rptMonitorSummary" runat="server" 
OnItemDataBound="rptMonitorSummary_OnItemDataBound">
   <ItemTemplate>
      <asp:Panel ID="Pnl" runat="server">
         <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header" title="<%# Eval("Name").ToString()%> ">
               <%# Eval("Name").ToString().Length > 9 ? 
                 (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
            </h5>
            <div id="divHover">
               <asp:Image Width="80px" ID="btnPerformanceImage" 
                   runat="server" Height="45px"></asp:Image>
            </div>
         </li>
      </asp:Panel>
   </ItemTemplate>
</asp:Repeater>

背后的代码：

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

我使用以下参考：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

因此，基本上，工具提示当前在一行中显示标题信息，例如：

ABC

我想在多行中显示如下内容：

ABC
PassPercentage = 100 

Answer 1

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

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

Answer 2

jQuery 工具提示不允许在标题属性内使用HTML标签。

但是，您可以为（重复项目的）每个文本创建临时占位符。 然后在鼠标悬停时将内容传递到工具提示。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function () {
        $(document).tooltip({
            items: "h5",
            content: function () {
                var tooltip = $(this).siblings('.tooltip');
                return tooltip.html();
            }
        });
    });
</script>

<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
    <ItemTemplate>
        <asp:Panel ID="Pnl" runat="server">
            <li class="ui-widget-content ui-corner-tr">
                <h5 class="ui-widget-header">
                    <%# Eval("Name").ToString().Length > 9 ? (Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
                </h5>
                <div class="center">
                    <asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
                </div>
                <div class="tooltip" style="display: none">
                    <%# Eval("Name") %><br/>
                    PassPercentage = <asp:Literal runat="server" ID="PassPercentageLiteral" />
                </div>
            </li>
        </asp:Panel>
    </ItemTemplate>
</asp:Repeater>


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();
        ....
    }
}