RadToolTip:如何让它在label控件上触发的鼠标悬停事件上显示

Question

我正在尝试让我的工具提示显示在label控件上触发OnMouseOver事件的时间。我在OnMouseOver="ShowToolTip()上得到一个javascript异常"Object expected“

<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

@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" />

Answer 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