Question

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

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

转发器代码：

<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 tool tip不允许标题属性中的HTML标记开箱即用。

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

enter image description here

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

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

2 个答案: