ToolTip / RadToolTipManager Client-side API

RadToolTipManager Client API

This example demonstrates how you can create tooltips dynamically on the client by using the RadToolTipManager's client-side API and load their content by using a WebService.

The page contains a few countries' images and a RadToolTipManager's contol which does not have them added in its TargetControls collection when the page initially loads. Each image's onmouseover event is hooked up and in its handler a tooltip is shown by using the manager's API:

function showToolTip(element)
{
       var tooltipManager = $find("<%=RadToolTipManager1.ClientID%>");

       //If the user hovers the image before the page has loaded, there is no manager created

       if (!tooltipManager) return;

      //Find the tooltip for this element if it has been created

      var tooltip = tooltipManager.getToolTipByElement(element);

     //Create a tooltip if no tooltip exists for such element

      if (!tooltip)
          {
              tooltip = tooltipManager.createToolTip(element);

             //Use the fact that the image was named after a country
             //Extract the country name from the image, and set it as the value to be supplied to the web-service

             var src = element.getAttribute("src", 2);
             var country = src.substring (src.lastIndexOf("/") + 1, src.lastIndexOf(".")); 
              tooltip.set_value(country);

          }
      setTimeout(function ()
            {
                  tooltip.show();
            }, 10);

}  

Note: The IgnoreAltAttribute property is introduced in the offical Q2 2010 release and it is not available in previous releases. When set to true, the tooltips ignore the alt attribute. The default value is false.