RadDock With RadToolTipManager / RadToolTip

Will they dance together?

Well, guess not that easy.

When you are using RadToolTipManager and set its ‘AutoTooltipify’ property to “true”,
every element on the page that has a 'title' attribute will be automatically “tooltify” with RadToolTip instead of the yellow default one.

The RadToolTip and RadDock integration problem:

The expected behavior is to have only one tool tip, the telerik’s one, absolutely not double tooltips (telerik’s and the default).
Updated to the current version of the RadControls for ASP.NET (version #2009.1.430.35), when the RadDock control will be tooltify by RadToolTipManager he’ll have them both.
Additionally, while the default tooltip is updated (as expected) to display “expand” when the RadDock is collapsed and inversely, the RadToolTip will keep the tooltip text from the load time, which means that when the RadDock state was “collapsed” on the page rendering, it will keep display “expand” even after expanding it (when it should display “collapse”).

Here is some screenshots describe the problem:

 
RadDock is collapsed. Notice the double tooltips and that the RadToolTip text keeps the “collapse” value from loading time while the default tooltip works as expected.

RadDock is expended. Still, there is double tooltips.

Suggested workaround:

We have two problems to deal with: first, is the unnecessary default tooltip and second is the RadToolTip wrong text.

As first step, let’s register the RadDock “OnClientInitialize” event.
Inside the handler, get the HTML element related with the “ExpandCollapse” command and remove its default tooltip by the removeAttribute() method.
This will unsure we will have only single tooltip element for the control.
Now, to ensure the RadToolTip will display the correct value, get the RadToolTipManager of the page (notice you catch the right one if you have more than one) and call its getToolTipByElement() method using the ExpandCollapse element as parameter.
This will find the tooltip element related with the “ExpandCollapseCommand”.
After having the ExpandCollapse element’s tooltip, register its "OnClientBeforeShow” event, there we can validate the tooltip text as fix it when necessary.
At the OnClientBeforeShow event of the ExpandCollapseCommand’s tooltip, we relying on the element CSS class name to set the correct text, as although the displayed text is wrong, the RadDock CSS class switches as expected.
Last thing we need to do is register the RadDock “OnClientCommand” event, as any collapse/expand command restores the default tooltip, so we have to remove it again.

Here is the complete script for copy ‘n paste. Just wire your controls with the relevant events and fix the script to match your elements ID:

<script type="text/javascript" language="javascript">
    function radDockInitialize(radDock, args) {
        // get the ExpandCollapse command's element
        var expandCollapseElement = radDock.getCommand('ExpandCollapse').get_element();
        if (expandCollapseElement == null) return;
        // remove the default tooltip
        expandCollapseElement.removeAttribute('title');
        // get the RadToolTipManager
        var ttManager = $find('radToolTipManager');
        if (ttManager) {
            // get the tooltip for the ExpandCollapse element
            var expandCollapseTooltip = 
                                  ttManager.getToolTipByElement(expandCollapseElement);
            if (expandCollapseTooltip != null) {
                // register the element's tooltip before show event
                expandCollapseTooltip.add_beforeShow(toolTipBeforeShow);
            }
        }
    }

    function radDockCommand(radDock, args) {
        // get the ExpandCollapse command's element
        var expandCollapseElement = radDock.getCommand('ExpandCollapse').get_element();
        if (expandCollapseElement != null) {
            // remove the default tooltip in each collapse/expand command
            expandCollapseElement.removeAttribute('title');
        }
    }

    function toolTipBeforeShow(tooltip, eventArgs) {
        // get the tooltip target control (the expand collapse element)
        var targetControl = tooltip.get_targetControl();
        // rely the element class name to set the correct tooltip text
        if (targetControl.className.match(/collapse/i)) {
            tooltip.set_content('Collapse');
        }
        else if (targetControl.className.match(/expand/i)) {
            tooltip.set_content('Expand');
        }
    }
</script>