How to position tooltip correctly ?

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

    Posted 30 Oct Link to this post

    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.

     

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

    Posted 31 Oct 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