RadToolTip：如何使其显示在标签控件上触发的鼠标悬停事件上

Question

我试图让我的工具提示显示何时在标签控件上触发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" />

Answer 1

我知道这很旧，但是最初的问题是您的函数名为ShowTooltip ，但是在OnMouseOver您拥有ShowTool T ip

Answer 2

您可以尝试从lblStatus删除OnMouseOver='ShowToolTip()' ，然后在rttStatus上将ShowEvent="OnClick"更改为ShowEvent="OnMouseOver" 。 资源

您还必须将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.

资源

Answer 3

@大卫，我发现没有任何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" />