Moving the tooltip

[Stuart Hemming]

I have a page that uses a RadGrid. I have RadToolTip set up to display tooltips when the user hovers over cerain elements (See Good.gif).

If an element is quite need the edge of the screen, the tooltip, which is set up with RelativeTo="Mouse" and "Position="Center", resizes itself and wraps the content (see NotSoGood.gif).

Even worse, if the mouse is very close to the edge of the screen, part of the tooltip just disappears off the edge (see WorseStill.gif)

Is there a way of getting the same sort of functionality you get with RadWindow when you set KeepInScreenBounds to true? That is, get it to display the tooltip as it would have done normally, just offset enough - up, down, left or right, as appropriate to accomodate the size of the tooltip without wrapping the content?

--
Stuart

[Marin Bratanov]

Hi Stuart,

Generally, a properly configured RadToolTip stays in the screen (provided there is enough room in the screen at all). In case the original position does not provide enough room in the viewport it will automatically try the opposite so that it stays in view.

How does your tooltip's markup look like? Have you set the needed properties like Width and Height (and then ShowEvent, HideEvent, RelativeTo, Position)? What I can assume for now is happening is that they (or at least the dimensions) are missing and you are using its load-on-demand mechanism - the tooltip is shown with the HTML elements' default dimensions (basically 0 by 0px) and it assumes the correct position, then content comes from the server and its stretches the HTML, so the position is no longer correct. We cannot know how much content is going to come in, so we cannot predefine a size. Generally the best approach is to have some standard layout for your user control/content you load inside so  you can set the proper dimensions in the markup. This is the case with most of the online demos as well.

In case this is not possible in your case please read further.

Autosizing is a feature of the RadWindow, not of the RadToolTip, the closest you can have to it is to leave the browser to resize the HTML by setting some Height (e.g. 70px to accomodate the loading sign), no Width and ContentScrolling to auto. Then in the OnClientResponseEnd event fore it to reposition:

function OnClientResponseEnd()
{
var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
if (!tooltip) return;
//you can also try calling this with some timeout 100 to 0 ms should suffice
tooltip.updateLocation();

//you can also try adding the following
//var popup = tooltip.get_popupElement();
//popup.style.width = "";
//popup.style.height = "";
}

If this also does not work for you I can suggest a more complex function that will also try to calculate dimensions and set them, not only clear them.


Greetings,
Marin
the Telerik team

[Stuart Hemming]

Marin,

you are correct in your assumptions.

The tooltip has't any explicity dimentions set. The content is made up of a number of DIVs (asp:Panels) whose visibility is controls by that item's content or lack thereof. The 'list' of items to be displayed could (can/will) have big gaps in it so this method was used to allow to tooltip to size accordingly without the need for scrollbars.

I've tried you solution, but to no avail.

This doesn't work either ...

function ContactInfoResponseEnd(sender, e)
{
    var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
    if (!tooltip)
    {
        return;
    }
    var popup = tooltip.get_popupElement();
    var right = popup.offsetLeft + popup.offsetWidth;
    if (right + 20 >= $telerik.$("body").width())
    {
        var offset = -1 * (right + 20) - $telerik.$("body").width();
        tooltip.set_offsetX(offset);
    }
}

[Marin Bratanov]

Hi Stuart,

It is a bit odd that setting some dimensions and recalculating the location after the response is received didn't work. Have you tried adding a small timeout when recalculating the position in the OnClientResponseEnd event after having set some height and ContentScrolling? In case this doesn't help I can suggest you try the following script that will manually calculate the tooltips' size:

Attached to the OnClientShow event to prevent the initial showing:

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

Then, once the content is received in the OnClientResponseEnd we try to manually get the dimensions of the content and set them as size for the tooltip:

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);

}

The caveat here is that the tooltip will only be shown after the content is received to prevent a jump from the original position to the new one. This will also not work with animations.

Kind regards,
Marin
the Telerik team

[Stuart Hemming]

Marin,

I made your last example work. Many thanks for that.

Just one oddity, I don;t know if it is possible to address this, but when the tooltip is displayed it looks like the attached screen shot. If it's not immediately obvious, the left and right borders (and shadows) aren't rendered.

--
Stuart

[Marin Bratanov]

Hi Stuart,

I am not sure why this happens, probably the lack of dimensions to the HTML elements of the tooltip interferes somehow with the content inside (e.g. there is a width: 100% setting in them) and thus the entire HTML popup does not work as expected.

Overall, the best approach is to provide dimensions from the beginning and only update the location after the content is received, yet I am also not certain why this didn't work for you. Is it possible that you have some custom CSS rules  that interfere with the tooltips' styles? A prime example would be a global rule for a table or td element.


All the best,
Marin
the Telerik team