How to close tooltip from code when initiated through RadTooltipManager

[Henrik Brinch]

Can anybody help me witht the following problem:

I have a RadTooltipManager where I dynamically on AjaxUpdate load the content of the tooltip (actually just a user control).

Now from within the tooltip content (that is the user control) I need a way, e.g. a button that will close the tooltip.

Is that possible?  If yes... how?  I don't see any Client site documentation for the RadTooltipManager :(

[Svetlina Anati]

Hi Henrik Brinch,

When you use RadToolTipManager you actually create RadToolTips and you can use the RadToolTip's client-side API.

I suggest writing a javascript function, which gets a reference to the active tooltip and then hides it. This function should look like the following one:

 function CloseActiveToolTip()
        {
            setTimeout(function(){
                var controller = Telerik.Web.UI.RadToolTipController.getInstance();
                var tooltip = controller.get_activeToolTip();
                if (tooltip) tooltip.hide();
            }, 1000);
        }

You can execute this function from server-side in a standard manner - e.g. inject script through a label, use the ClientScript.RegisterStartupScript method, RadAjaxManager's ResponseScripts collection, etc.  


Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sharbel Lutfallah]

Hi there,

I thought i should add to this to save others the same trouble i went through when the script does not fire.  Consider the following scenario:

1) I created a usercontrol that holds a RadToolTipManager that acts as a wrapper for a custom confirm dialog

2) on AjaxUpdate, i dynamically add to the tipmanager's UpdatePanel ContentContainer, and set some configuration settings before showing the tooltip.

3) User clicks the Confirm button which is an ImageButton inside the UpdatePanel that exists in the ToolTipManger's tooltip.

4) A custom event that I created for the usercontrol gets called and is bubbled to the calling page...

5) Event does its thing and then I want to execute the Page.RegisterStartupScript to close the tooltip.  This will not work because we are in an UpdatePanel (the update panel that exists in the TooltipManager)

So, to fix this, you must register your clientside script like this:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), Guid.NewGuid().ToString(), "CloseTooltip();", true);

Hope this helps!

[Svetlina Anati]

Hello Sharbel,

Yes, this is the correct approach in such case but this depends on the exact scenario - you can also examine this demo which uses exactly the same approach.



Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[bemara57]

Svetlina, excellent Javascript code! I adjusted it so it can be used on pages without knowing if there are even any Tooltips on the page beforehand (dynamically created pages). Now this can be used as a global function.

function CloseActiveToolTip() 
{  
    setTimeout(function(){
        if (Telerik.Web.UI.RadToolTipController)
        { 
            var controller = Telerik.Web.UI.RadToolTipController.getInstance(); 
            var tooltip = controller.get_activeToolTip(); 
            if (tooltip) tooltip.hide(); 
        }
    }, 200); 
}

This ensures the Tooltip is on the page first, rather than throwing an error if it isn't. Also, I integrated this in my RadWindow alerts so when a radalert pops up, it closes the active tooltip. Without it, the alert and the dim screen shows up BEHIND the tooltip, defeating the purpose of page alerts.
           
            var oldAlert = radalert;
            window.radalert = function(text, oWidth, oHeight, oTitle)  
            {           
                oldAlert(text, oWidth, oHeight, oTitle);
                CloseActiveToolTip();
            }
                       
            var oldConfirm = radconfirm;
            window.radconfirm= function(text, callBackFn, oWidth, oHeight, callerObj, oTitle)  
            {           
                oldConfirm(text, callBackFn, oWidth, oHeight, callerObj, oTitle);
                CloseActiveToolTip();
            }

            var oldPrompt = radprompt;
            window.radprompt = function(text, callBackFn, oWidth, oHeight, callerObj, oTitle, defaultValue)  
            {           
                oldPrompt(text, callBackFn, oWidth, oHeight, callerObj, oTitle, defaultValue);
                CloseActiveToolTip();
            }

I hope this helps.