Adding ToolTipTargetControl via JavaScript

[dstj]

Hi,

Using RadToolTip v2008.1.515.20, I'm trying to add a ToolTipTargetControl via Javascript in the RadToolTipManager object to achieve the same result as this:

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Position="BottomCenter"
         Animation="Fade" Width="550">
   <WebServiceSettings Method="GetHelpTooltip" Path="services/RadControlsHelper.asmx" />
   <TargetControls>
      <telerik:ToolTipTargetControl TargetControlID="imgHelp" IsClientID="true" Value="2" />
   </TargetControls>
</telerik:RadToolTipManager>

I tried adapting a version from this old post but still gets errors. Here's the function I use :

function AddTarget(ctl)
{
  // Get the tooltipmanager
  var tooltip = $find("<%= RadToolTipManager1.ClientID %>");
  var strID = ctl.id;
  // 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._initializeWebServiceToolTip($get(strID), strID);
}

I try to attach the tooltip to an image from the onload event like this :

<img id="imgHelp" src="images/help.gif" alt="" class="help" onload="AddTarget(this);">

and get the following error that seems to be from the RadToolTip javascript:

_2a.add_beforeShow is not a function

https://localhost/ScriptResource.axd?d=FDOeA3HRofvWSv3eNAm2OQZnrwTCwpmI81gKOkyPTEpPeMYYWS1Cc1MXh6rlSLlBfU_kKYfySEJehs7VWhbzeg2&t=633463791500000000

Line 162 : _2a.add_beforeShow(Function.createDelegate(this,function(_2b,_2c){

Do you know what the problem could be? Also, I can't seem to find the Client-Side API for the RadToolTipManager object, is it available ?

Thanks a lot,

Dominic.

[Svetlina Anati]

Hi dstj,

Here is how to dynamically add tooltips for elements:

function AddTarget()
{
    // Get the tooltipmanager
    var tooltip = $find("<%= RadToolTipManager1.ClientID %>");
    // your control's ClientID
    var strID = "div1";
    tooltip._targetControls.push([strID, strID]);
    // registers mouseover events, etc.
    ///tooltip._initializeTooltip($get(strID), strID);
    tooltip.createToolTip($get(strID),strID);
}

You will need to use the createToolTip() method  - the internal _initializeTooltip() one is not working with the current version of the control.

For your convenience I am attaching a sample demo.

All the best,
Svetlina
the Telerik team

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

[dstj]

That did it, thanks a lot.

For the sake of completeness, I checked that you can add a third parameter to createToolTip() to pass a value to the WebService...

This is my working function :

function AddTarget(ctl, param)
{
   // Get the tooltipmanager
   var tooltip = $find("<%= RadToolTipManager1.ClientID %>");
   var strID = ctl.id;
   tooltip._targetControls.push([strID, strID]);      // 1st => id of DOM element, 2nd => optional server ClientID.
   tooltip.createToolTip($get(strID),strID, param);   // registers mouseover events, etc.
}

[Svetlina Anati]

Hello dstj,

Yes, you are right that you can provide a third parameter to the createToolTip method in order to pass a value to a WebService.

The createToolTip method has been improved and you can achieve the desired behavior without adding the following code line:

 

tooltip._targetControls.push([strID, strID]);

An online demo which demonstrates the RadToolTipManager's client-side API will be available soon.

All the best,
Svetlina
the Telerik team

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