Exclude specific controls from AutoTooltipify

[Grant Henderson]

We recently implemented AutoTooltipify.  Looks great but then we realised that sometimes we would want to exclude certain controls. Namely, tooltips within tooltips.  So two questions:

1. Has anyone looked at the inner working of AutoTooltipify and come up with a nice way of excluding specific controls/regions?  I know we could manually add controls using TargetControls, however, if 99% of controls are auto, it's easier to exclude one or two that we don't want.  I imagine performance would be better too.

2. We have an autotooltip that opens on mouse over and closes on mouse out (of tooltip).  The problem is that we have objects inside the tooltip that also have tooltips.  Moving the mouse over those inner objects displays a tooltip in the top left of the screen and closes the outer tooltip.  Presumably the controls don't know where to render the inner tooltip and the outer tooltip is no longer "active" so it closes.  Any suggestions on how we have inner tooltips in the correct position AND don't close the outer tooltip?  Perhaps there should be a property in addition to AutoTooltipify that disables inner tooltips?

Enjoy the challenge! :)

Grant.

[Marin Bratanov]

Hello Grant,

Generally there is no property, inner tag or other collection that excludes controls from the Autotooltipify functionality. Its purpose is to quickly and easily replace ALL browser tooltips with RadToolTips so that you can achieve more consistent look on your page.

That being said - what you can try is cancelling the showing of the tooltips for the elements you do not wish to tooltipify, for example:

function OnClientBeforeShow(sender, args)
{
    if (sender.get_targetControlID() == "control1" ||  ender.get_targetControlID() == "otherControl")
    {
        args.set_cancel(true);
    }
}

Where this function is attached to the OnClientBeforeShow event of the RadToolTipManager and inside you check for the client ids of the elements you do not wish to have RadToolTips. You can easily see how this can become a maintenance nightmare and I generally advise against such hacking of the functionality of the RadToolTipManager. Another point of interest here is that the browser tooltip will still be removed from these elements (i.e. their title attribute) and a RadToolTip will be attached to them, it will simply never be shown.

On your second inquiry - when e second RadToolTip tries to open on the page the first will be automatically closed. This behavior is by design and cannot be changed - as with regular tooltips only one can be visible in any given point of time. I am even not sure how you have controls inside tooltips created with the Autotooltipify functionality, as this takes only the title string from the targeted element and sets it as text (although it supports HTML in the string).

Best wishes,
Marin
the Telerik team

[Grant Henderson]

Thanks Marin.

1. Your OnClientBeforeShow solution is a great starting point.  We inherit ALL Telerik controls in our own classes to extend functionality.  We'll simply add Exclude properties on our controls.  That in turn will add Excluded controls to a javascript array (much like validators) that we can quickly check.  As I wrote, it's usually only a handful of controls so it shouldn't impact performance.

2. With the Tooltip in a Tooltip: we have a AutoTooltipify enabled on one tooltipmanager (mouse overs) and also a regular tooltip on another element (onclick).  When the regular tooltip is opened, we render a repeater of images inside it.  When we mouse over those images, the autotooltipify kicks in and closes the regular tooltip.  We see several possible solutions. A tooltip exclusion list or use an alternate control like a RadWindow for the regular tooltip.

We'll go away and experiment!

[Marin Bratanov]

Hi Grant,

If you find it comfortable you can implement this functionality. Performance will not be different than without this exclusion. This is, of course, provided the array is not too big, so that looping through it does not take too long.

Currently there is no such list and it is not in our immediate plans. I have logged this for research, yet I cannot provide an estimate when or even if this will ever be implemented, as it defeats the purpose of this simple (to use) functionality and will make its internal implementation even more complex than it is now. For the time being you can implement your custom exclusion mechanism or use toolip zone and exclude the regular RadToolTip from the zone (i.e. place it at the beginning/end of the form, for example, and place the rest in a zone). You can, of course, also show a RadWindow instead of the first tooltip if this matches your scenario, with its OffsetElementID property for example.


Regards,
Marin
the Telerik team

[Grant Henderson]

Hi Marin,

I decided to use ToolTipZoneID as you described, however, it doesn't seem to resolve the inner tooltip problem.  My understanding of the tooltip zone is it should ONLY be effected by controls INSIDE the ToolTipZoneID.  BUT the inner tooltip which is NOT inside the ToolTipZoneID is still causing the manual tooltip to close.  Here's an example:  

<%@ Page Title="" Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
</head>
<body>
    <form id="f" runat="server">
    <telerik:RadScriptManager ID="SM" runat="server" />
    <telerik:RadAjaxManager ID="RAM" runat="server" DefaultLoadingPanelID="BP">
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="BP" runat="server" Transparency="100" />
    <div id="Main">
        <div id="Header">
            <div id="TopMenu">
                <a id="CA" class="Menu">Change Account</a>
            </div>
        </div>
        <div id="Body">
            <p title="test tooltip" id="TestContent">
                test content</p>
        </div>
    </div>
    <telerik:RadToolTipManager runat="server" ID="ChangeAccount" Position="TopCenter"
        Width="640px" Height="100px" OnAjaxUpdate="ChangeAccount_AjaxUpdate" HideDelay="2000">
        <TargetControls>
            <telerik:ToolTipTargetControl TargetControlID="CA" IsClientID="true" />
        </TargetControls>
    </telerik:RadToolTipManager>
    <telerik:RadToolTipManager runat="server" RelativeTo="Mouse" Position="TopCenter"
        AutoTooltipify="true" Width="200" EnableShadow="true" Height="10" Animation="Fade"
        AnimationDuration="500" ShowDelay="750" ToolTipZoneID="Body" RenderInPageRoot="true">
    </telerik:RadToolTipManager>
    </form>
</body>
</html>
<script runat="server">

    protected void ChangeAccount_AjaxUpdate(object o, ToolTipUpdateEventArgs e)
    {
        Control ctrl = Page.LoadControl("~/Test/Account.ascx");
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);
    }

</script>

And the Account.ascx file:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.UserControl" %>
<h1>
    Change Account</h1>
<p title="inner tooltip">
    inner content
</p>

As you will see, the two tooltip managers use a different control and zone respectively.  Neither are nested so I would assume they shouldn't interfere with each either.

Mousing over "test content" and "change account" work as expected and either the autotooltip or manual tooltip appear as expected.

Mousing over "inner content" (which has NO telerik tooltip manager associated with it) causes the manual tooltip to close.

If I disable AutoTooltipify, remove ToolTipZoneID and replace it with a target to "TestContent" it works as I would expect.  The manual tooltip opens and mousing over "inner content" displays the browser tooltip (not the telerik one).

<telerik:RadToolTipManager runat="server" RelativeTo="Mouse" Position="TopCenter"
    AutoTooltipify="false" Width="200" EnableShadow="true" Height="10" Animation="Fade"
    AnimationDuration="500" ShowDelay="750" RenderInPageRoot="true">
    <TargetControls>
        <telerik:ToolTipTargetControl IsClientID="true" TargetControlID="TestContent" />
    </TargetControls>
</telerik:RadToolTipManager>

I also experimented with RenderInPageRoot but it made no difference.

This behaviour suggests to me that AutoTooltipify is not honouring ToolTipZoneID.  It reacts to the "inner content" tooltip which is NOT inside ToolTipZoneID and has NO tooltip manager associated with it.

Your thoughts?

Regards,  Grant.

[Marin Bratanov]

Hi Grant,

This seems to be a bug in the RadToolTipManager. Thank you for your report. As a token of gratitude I have also updated your Telerik points. I'm afraid there is no simple workaround for the time being save for adding the needed controls in the TargetControls collection and avoiding the autotooltipify functionality.


Best wishes,
Marin
the Telerik team