How to position tooltip correctly ?

[Slava]

Hello,

I have RadHtmlChart Pie and I need to display a tooltip when user hovers mouse over it's legend item. I placed RadToolTip on my page, put some content into it and now I need to position it over legend items.

    <telerik:RadToolTip ID="ToolTip" runat="server" RelativeTo="BrowserWindow" Position="Center" Width="150" Height="100">
        <table>
            <tr>
                <td><span style="font-weight: bold" id="TooltipGroupName"></span></td>
            </tr>
            <tr>
                <td><span id="TooltipAmount"></span></td>
            </tr>
            <tr>
                <td>Transactions:&nbsp;<span id="TooltipNumTransaction"></span></td>
            </tr>
        </table>
    </telerik:RadToolTip>


Here is the legend hover event handler:

function OnLegendItemHover(e)

{
                var DataItem = e.series.data[e.pointIndex];

                var GroupName = DataItem.GroupName;
                $("#TooltipGroupName").html(GroupName);

                var Amount = kendo.format("{0:C2}", DataItem.AbsAmount * DataItem.AmountSign);
                $("#TooltipAmount").html(Amount);

                var NumTransaction = DataItem.NumTransaction;
                $("#TooltipNumTransaction").html(NumTransaction);

                var ToolTip = $find("<% =ToolTip.ClientID %>");
                ToolTip.OffsetX = e.element.getBoundingClientRect()["left"] + " px";
                ToolTip.OffsetY = e.element.getBoundingClientRect()["top"] + " px";
                ToolTip.show();
            }

 

I actually wasted two days trying different ways to position RadToolTip but I could not do it. Do RelativeTo options actually work ? RelativeTo="Mouse" would be easiest for me I guess. So I could simply call ToolTip.show() in my handler.

 

[Slava]

Here is the Telerik's version we have installed: Telerik UI for ASP.NET AJAX R3 2017 13 09 2017