RadToolTip：如何让它显示在标签控件上触发的鼠标悬停事件上答案

【问题标题】：RadToolTip: how to get it to show on mouse over event triggered on a label controlRadToolTip：如何让它显示在标签控件上触发的鼠标悬停事件上
【发布时间】：2012-04-01 00:39:08
【问题描述】：

我试图让我的工具提示显示何时在标签控件上触发 OnMouseOver 事件。我在 OnMouseOver="ShowToolTip()

上收到一个 JavaScript 异常“预期对象”

<script type="text/javascript">
    function ShowTooltip() {
        window.setTimeout(function () {
            var tooltip = $find("<%# rttStatus.ClientID %>");
            //API: show the tooltip
            tooltip.show();
        }, 10);
    }
</script>

<telerik:RadTreeList>
    <Columns>
        <telerik:TreeListTemplateColumn HeaderText="Status" SortExpression="Status" UniqueName="Status">
            <ItemTemplate>
               <asp:Label runat="server" ID="lblStatus" Text='<%# GetStatus(Eval("Status")) %>' 
               OnMouseOver='ShowToolTip()' />
            </ItemTemplate>
            <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="80px" />
            <HeaderStyle HorizontalAlign="Center" Width="80px" />
        </telerik:TreeListTemplateColumn>
    </Columns>            
</telerik:RadTreeList>

<telerik:RadToolTip runat="server" ID="rttStatus" HideEvent="FromCode" Position="MiddleRight" Title="Raison"
                    Width="150px" Height="70px" Animation="Fade" ShowEvent="OnClick" ShowDelay="0" ManualClose="false"
                    RelativeTo="Element" TargetControlID="lblStatus" IsClientID="true" Text="this is a test" Skin="Telerik" />

【问题讨论】：

标签： c# javascript asp.net ajax telerik

【解决方案1】：

我知道这是旧的，但最初的问题是你的函数名为 ShowTooltip，但在你的 OnMouseOver 你有 ShowToolTip

【讨论】：

【解决方案2】：

您可以尝试从 lblStatus 中删除 OnMouseOver='ShowToolTip()' 并在 rttStatus 上将 ShowEvent="OnClick" 更改为 ShowEvent="OnMouseOver"。 Source

您还必须将telerik:RadToolTip 放在telerik:TreeListTemplateColumn 的ItemTemplate 中。

<telerik:RadTreeList>
    <Columns>
        <telerik:TreeListTemplateColumn HeaderText="Status" SortExpression="Status" UniqueName="Status">
            <ItemTemplate>
    <asp:Label runat="server" ID="lblStatus" Text='<%# GetStatus(Eval("Status")) %>' 
                          OnMouseOver='ShowToolTip()' />

    <telerik:RadToolTip runat="server" ID="rttStatus" HideEvent="FromCode" Position="MiddleRight" Title="Raison"
                        Width="150px" Height="70px" Animation="Fade" ShowEvent="OnClick" ShowDelay="0" ManualClose="false"
                        RelativeTo="Element" TargetControlID="lblStatus" IsClientID="true" Text="this is a test" Skin="Telerik" />

            </ItemTemplate>
            <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="80px" />
            <HeaderStyle HorizontalAlign="Center" Width="80px" />
        </telerik:TreeListTemplateColumn>
    </Columns>            
</telerik:RadTreeList>

您也可以尝试使用下面的 1 telerik:RadToolTip，但更改 javascript：

from: var tooltip = $find("<%# rttStatus.ClientID %>");
to:   var tooltip = $find("<%= rttStatus.ClientID %>");  //Since  we're not in a data-binding syntax the '#' should be replaces with '='
or:   var tooltip = $find("rttStatus"); // The telerik example shows using the literal ID of the control instead of the ClientID.

source

【讨论】：

如果可行，则意味着不需要 javascript 块
对不起，我之前没有发现这个。您需要将 telerik:RadToolTip 放入 telerik:RadTreeList ItemTemplate
嗯...我能想到的最后一件事是回到使用 js 块，但有 var tooltip = $find("");

【解决方案3】：

@David，我找到了一个更好的解决方案，不涉及任何 javascript，这次使用 RadToolTipManager：

<telerik:RadTreeList>
    <Columns>
        <telerik:TreeListTemplateColumn HeaderText="Status" SortExpression="Status" UniqueName="Status">
            <ItemTemplate>
               <asp:Label runat="server" ID="lblStatus" Text='<%# GetStatus(Eval("Status")) %>' ToolTip='<%# Eval("Reason") %>'/>
            </ItemTemplate>
            <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="80px" />
            <HeaderStyle HorizontalAlign="Center" Width="80px" />
        </telerik:TreeListTemplateColumn>
    </Columns>            
</telerik:RadTreeList>

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" RelativeTo="Element"
    Position="MiddleRight" AutoTooltipify="true" ContentScrolling="Default" Width="150"
    Height="10" />

【讨论】：