Add TargetControls collection from JavaScript

[Sime]

I have dropped a RadToolTipManager control on my web page which calls an OnAjaxUpdate function which can set tooltip content based on an element's ID.

Within this web page is a cached user control - actually a table which contains the elements (some divs with ID's) that i wish to popup tooltips for when I hover over them.

Because the table is a cached user control the parent page can't access the element ID's server-side to add them to the RadToolTipManager's TargetControls collection.

I thought the best answer would be to generate the RadToolTipManager's TargetControls collection from JavaScript when the page loads.

I know how to get the list of element ID's using JavaScript, but how do I get a reference to the RadToolTipManager and then generate its TargetControls collection using my ID's?

The clientside documentation provided is too sparse for me to work out.

Thanks for any answers!

[RyanBoud]

Hi Sime,

I have been having problems updating the client TargetControls collection when Ajaxing another control, and have resorted to using JavaScript. This is what I am using, which seems to work fine, but I've only just worked it out, so it may not be quite right. Also it may change on the final release of course.

Basically, the tooltipmanager is represented by a div on the page, and the Javascript object is stored as the control property of that div. Using this, you can add to its _targetControls array so the manager can track it, and call _initializeTooltip to register the mouseover event for the control.

// Get the tooltipmanager
var tooltip = $get('ctl00_ContentMain_Tooltip').control;
// your control's ClientID
var strID = "MyControl_ClientID";
// I think the first entry is the id of the page DOM element
// and the second is an optional server ClientID.
tooltip._targetControls.push([strID, strID]);
// registers mouseover events, etc.
tooltip._initializeTooltip($get(strID), strID);

I am also adding to the TargetControls in the code behind, but this may not be necessary.

[Sime]

Hi Ryan - thanks for your answer - i've only just got around to looking at this again!!!

I've tried your code but it doesn't seem to be working for me. I don't kmow what i'm doing wrong? When I look at my page source, I can see the tooltopmanager div (i've given it an ID of "rttm") as you suggest. Here's the markup:

<div id="rttm" class=" " style="display:none;">
<div id="rttmPanel"></div>
<input id="rttm_ClientState" name="rttm_ClientState" value="{ AjaxTargetControl : &quot;&quot; }" type="hidden" />
</div>

However, i can't see a "control" property belonging to it?
The tooltips work if i define them server-side, so there's nothing wrong with my coding, i just can't seem to add to the TargetControls collection from JavaScript!

I really need this to work! Can anyone at Telerik help?

[Georgi Tunev]

Hello Sime,

The suggestion that Ryan gave (thank you, Ryan) is a good one and it will work. Since you are having problems implementing it I would suggest to open a new support ticket and send us the following:

1. A sample working project where your logic is implemented - please make sure that the project can be run locally.
2. At the point where you want to add the desired collection - set a simple Javascript alert and also provide the collection that you want to add.

We will check your project and will replace the Javascript alert with a code that will add the collection for you.



Greetings,

Georgi Tunev
the Telerik team

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

[Sime]

Thanks Georgi for the answer and offer of support. I can't really create a local version of my application though - it accesses several databases on our LAN both for data and web forms security - it would be a nightmare to convert into a standalone unit! If it becomes the only option i may have to do this, but all i really need to know is how to get a reference to the tooltip manager in JavaScript so that I can call its _targetControls.push() and _initializeTooltip() methods. When i use the solution kindly offered by Ryan I get an error saying _targetControls is null or not defined.
Can you provide a clearer explanation of the method so I can attempt this before I spend hours converting my project?

Your help is really appreciated!

[Georgi Tunev]

Hi Sime,

Here is a sample code - the only difference is that I am using $find to get a reference to the RadToolTipManager:

<form id="form1" runat="server">
    <script type="text/javascript">
    function AddTarget()
    {
        // Get the tooltipmanager
        var tooltip = $find("<%= RadToolTipManager1.ClientID %>");
        // your control's ClientID
        var strID = "div1";
        // I think the first entry is the id of the page DOM element
        // and the second is an optional server ClientID.
        tooltip._targetControls.push([strID, strID]);
        // registers mouseover events, etc.
        tooltip._initializeTooltip($get(strID), strID);
    }
    </script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div title="I am a tooltip" id="div1" style="width: 60px; height: 30px; background-color: red">
    </div>
    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server">
        <TargetControls>
            <telerik:ToolTipTargetControl IsClientID="true" TargetControlID="nosuchcontrol" />
        </TargetControls>
    </telerik:RadToolTipManager>
    <br />
    <br />
    <br />
    <asp:Button ID="Button1" OnClientClick="AddTarget(); return false;" Text="Click to tooltipify the div above"
        runat="server" />
</form>

You can see the result in the attached movie.


Best wishes,
Georgi Tunev
the Telerik team

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

[Iggy]

FYI...

Just in case someone comes across this post.  _initializeTooltip no longer works (at least it didn't for me).  Use "createToolTip()" instead.  See this post for an updated solution:

http://www.telerik.com/community/forums/aspnet-ajax/tooltip/adding-tooltiptargetcontrol-via-javascript.aspx