ToolTip shifts to the left after load

[Ullas]

Hi,
i have a RADToolTipManager in my web page. The problem i am facing is that after the web page loads, the pointer of the tool tip shifts to the left of the target control by around 50px.

<telerik:RadToolTipManager ID="InvoiceToolTipManager" runat="server" Position="TopCenter"  EnableShadow="true" Animation="Fade" RelativeTo="Element" Skin="Web20" CssClass="toolTip" AutoCloseDelay="30000">
        <WebServiceSettings Method="GetToolTipData" Path="/Help/ToolTipService.asmx"/>
/telerik:RadToolTipManager>

I have read in some posts that this is probably because the tool tip manager does not have a width defined. The problem i have is that the data is for Help text and i do not want to go with a fixed width.
So is it possible to have a flexible width for the control based on the length of the text that is coming from the target web service?

Ullas

[Marin Bratanov]

Hi Ullas,

Generally speaking, the ToolTip needs to know its size in order to position itself correctly, as on that size depend the logic for determining where the callout should be, the logic for remaining inside the browser's viewport and the logic for choosing the correct position if no room is available.

What I would suggest is that you try setting the size of the tooltip to a value that is close to what you expect to need and if the content is larger the tooltip could accomodate some tolerance.

There is a sort of a hack possible, that first cancels the tooltip showing and when the whole response is received it resizes it and shows it. You can give it a try, yet it is not guaranteed to work in all cases and scenarios and it again works better if the content has some explicit dimensions:

function OnClientResponseEnd()
{
    setTimeout(function ()
    {
        var active = Telerik.Web.UI.RadToolTip.getCurrent();
        var width = active._tableElement.offsetWidth;
        var height = active._tableElement.offsetHeight;
        active.set_width(width);
        active.set_height(height);
        active.get_popupElement().style.width = "";
        active.get_popupElement().style.height = "";
        active._show();
        active._adjustCallout();
    }, 100);

}

function OnClientShow(sender, args)
{
    sender.get_popupElement().style.display = "none";
}

where these functions are attached respectively to the OnClientResponseEnd  and the OnClientShow events.


Regards,
Marin
the Telerik team