Creating Dynamic ToolTip Using RadControls and JavaScript

RadToolTip

 

RadToolTip is a context-sensitive tool for displaying rich content, detailed information, overlaid forms, or just about anything that should appear over a given element. This can display rich content, including (but not limited to) text and images, but also some interactive forms with standard ASP.NET and user controls.

 

Basic Properties

 

The basic properties are:

1. TargetControl ID: It specifies the ID of the element on which the tooltip should appear to the client.
2. IsClient ID: When set to True the element is pure HTML and not a server control.
3. On Ajax update: Event to supply the content of tooltips generated by RadToolTipManager.
4. rad_Ajaxupdate: This function is fired when the targeted control is triggered and the function is written in a .vb file.
5. Show Events: This property helps to set the event on which the tooltip must be shown.

Key Features

 

The key features are:

• Display HTML and ASP.NET
• Add to a Single or Multiple Elements
• Load on Demand
• Full Control over Tooltip Position
• Show on Event
• Close on Click
• Mouse Trailing
• Sticky Tooltips
• Show Delay and AutoClose Delays
• Animation effects
• Microsoft AJAX Update Panel in RadToolTip
• Content scrolling
• Advanced Skinning

Example

 

First create a web page where you want to apply the tooltip.

 

Here I am creating a div and inside it, I insert five images and pass a JavaScript function name with the handle of the tooltip binding and all that.

<div>
       <img id="image1" src="1.jpg" onmouseover="showToolTip(this);" /><br />
       <img id="image2" src="2.jpg" onmouseover="showToolTip(this);" /><br />
       <img id="image3" src="3.jpg" onmouseover="showToolTip(this);" /><br />
       <img id="image4" src="4.jpg" onmouseover="showToolTip(this);" /><br />
       <img id="image5" src="5.jpg" onmouseover="showToolTip(this);" />
</div>

 

 

Now add a scriptmanager and RadToolTip and provide the required properties, whatever you need.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <telerik:RadToolTip ID="RadToolTip1" runat="server"
            RelativeTo="Element" Position="MiddleRight" Width="150px" ShowEvent="FromCode"
            HideEvent="LeaveTargetAndToolTip">
        </telerik:RadToolTip>

Note: To work with a RadControl you need to first register the control as I do at the top of the page.

 

Now for the JavaScript function, as in the following:

<script type="text/javascript">
            function showToolTip(obj) {
                var radToolTip = null;
                switch (obj.id) {
                    case 'image1':
                        radToolTip = $find("<%= RadToolTip1.ClientID %>");
                        radToolTip.set_targetControl(obj);
                        radToolTip.set_text("This is Cat ");
                        break;
                    case 'image2':
                        radToolTip = $find("<%= RadToolTip1.ClientID %>");
                        radToolTip.set_targetControl(obj);
                        radToolTip.set_text("This is Tiger");
                        break;
                    case 'image3':
                        radToolTip = $find("<%= RadToolTip1.ClientID %>");
                        radToolTip.set_targetControl(obj);
                        radToolTip.set_text("This is Dog");
                        break;
                    case 'image4':
                        radToolTip = $find("<%= RadToolTip1.ClientID %>");
                        radToolTip.set_targetControl(obj);
                        radToolTip.set_text("This is Penguin");
                        break;
                    case 'image5':
                        radToolTip = $find("<%= RadToolTip1.ClientID %>");
                        radToolTip.set_targetControl(obj);
                        radToolTip.set_text("This is Spider");
                        break;
                }
                setTimeout(function () {
                    radToolTip.show();
                }, 5);
            }
        </script>

In the JavaScript function above I am using a switch/case. Using the case I simply set the text to a particular image.

 

Now test the page, just run your page and when you hover your mouse over an image you will see the tooltip showing different text for each of the images.

 

 

 

Thanks