Position by element issue with client-side tooltipmanager

[Felipe]

Hello,

I have a radgrid with a column of thumbnail images (unique per row), and I would like to add a tooltip with the full-size image that shows and hides when the mouse is above the thumbnail.

this can all be done on the client since the thumbnail images are named similarly to the full-size images.  So far I have the following code:

my tooltip manager markup:

<telerik:RadToolTipManager ID="slideToolTipMan" runat="server" OffsetY="-1"
    ShowEvent="FromCode" OnClientBeforeShow="OnClientBeforeShow"
    EnableShadow="true"
    Sticky="false"
    RelativeTo="Mouse"
    Position="MiddleRight">
</telerik:RadToolTipManager>

the itemtemplate of the gridtemplatecolumn in the radgrid

<ItemTemplate>
    <img onmouseout='HideSlideToolTip(this);' onmouseover='ShowSlideToolTip(this);' id="thumbnailImg" alt="X" src='...' />
</ItemTemplate>

the relevant javascript code:

function ShowSlideToolTip(element) {
    var tooltipManager = $find("<%= slideToolTipMan.ClientID %>");
    if (!tooltipManager) return;
    var tooltip = tooltipManager.getToolTipByElement(element);

    if (!tooltip) {
        tooltip = tooltipManager.createToolTip(element);
        tooltip.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);
        // <here I insert content into the tooltip>
        tooltip.show();
        tooltip.set_autoCloseDelay(0);
        tooltip.set_contentElement(imgElement);
    }
    tooltip.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);
}

function OnClientBeforeShow(sender, args) {
    sender.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);
}

function HideSlideToolTip(element) {
    var controller = Telerik.Web.UI.RadToolTipController.getInstance();
    var tooltip = controller.get_activeToolTip();
    if (tooltip) tooltip.hide();
}

The result doesn't work the way it should...  it is very peculiar.

the tooltips tend to show up at like one of three or so places  (ie to the "middleRight" of say Row 1, row 4, and row 5)

all of the tooltips show up and display the correct content when hovered over the corresponding target, however where the tooltip is positioned seems almost random.

this is becoming a problem for the usability of the interface, because the tooltip is rendered on top of it's own target, and thus it closes and reopens with every mouse movement (since the mouseout event is fired when the tooltip element is on top of the target element).

I have tried everything i can think of, but it does not seem to cooperate.  any help would be much appreciated!

[Marin Bratanov]

Hi Leland,

This behavior is mostly due to the missing properties in the RadToolTipManager declaration. Please note a few behavior patterns: 

• You need to set its RelativeTo property to Element instead of Mouse (relative to mouse would cause the tooltip to appear above the element, as it positions itself according to the mouse pointer, which is somewhere over the element).
• You also need to set its Position property to MiddleRight. Then you wouldn't need to try to set it all the time in the JavaScript functions.
• The tooltip must be shown outside of the if() statement to ensure it will be shown every time a user hovers on the element, even if he has not hovered other elements in the meantime.
• To ensure correct positioning you should also set its target element explicitly when you create it.
• If you create an element dynamically to add to the tooltip you need to add it after you call its show() method, due to its "lazy initialization" (a design feature that decreases the overhead of the tooltip - it loads its content just when it needs it, not before).
• You can also use the new  Telerik.Web.UI.RadToolTip.getCurrent() method to get the current tooltip that you need to hide instead of the old obsolete one.

For your convenience I have attached a page, based on your source that appears to be working correctly on my end. You can use it as a reference to the above points. Please note that I have used a dummy datasource for illustration purposes.

All the best,
Marin
the Telerik team

[Felipe]

Marin,

Thank you very much - your example worked for me as I needed.  Much appreciated!