How to position tooltip correctly ?

2 posts, 0 answers
  1. Slava
    Slava avatar
    6 posts
    Member since:
    May 2007

    Posted 30 Oct 2017 Link to this post


    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">
                    <td><span style="font-weight: bold" id="TooltipGroupName"></span></td>
                    <td><span id="TooltipAmount"></span></td>
                    <td>Transactions:&nbsp;<span id="TooltipNumTransaction"></span></td>

    Here is the legend hover event handler:

    function OnLegendItemHover(e)
                    var DataItem =[e.pointIndex];

                    var GroupName = DataItem.GroupName;

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

                    var NumTransaction = DataItem.NumTransaction;

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


    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 in my handler.


  2. Slava
    Slava avatar
    6 posts
    Member since:
    May 2007

    Posted 31 Oct 2017 in reply to Slava Link to this post

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


Back to Top