Hello Kurt,
I can suggest that you try the following:
- Autotooltipify the images through the RadToolTipManager's AutoTooltipify property.
- When the tooltip from the TooltipManager is displayed attach a click handler to it which will display inner tooltip with the desired content.
- The inner tooltip will be passed with content and position.
For example:
ASPX:
Regards,
Danail Vasilev
Telerik
I can suggest that you try the following:
- Autotooltipify the images through the RadToolTipManager's AutoTooltipify property.
- When the tooltip from the TooltipManager is displayed attach a click handler to it which will display inner tooltip with the desired content.
- The inner tooltip will be passed with content and position.
For example:
ASPX:
<form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> $ = $telerik.$; function OnClientShow(sender, args) { var contElement = sender.get_contentElement(); var contElLocation = $telerik.getLocation(contElement); var content = sender.get_content(); //Add click event to the tooltip content element where you can display the desired content var ev = $._data(contElement, 'events'); if (!(ev && ev.click)) { $(contElement).click({ param1: content, param2: contElLocation }, tooltipClick); } } function tooltipClick(event) { var ttp = $find("<%=RadToolTip1.ClientID%>"); var content = event.data.param1; var location = event.data.param2; //Set content in the template $("#PageTitle").html(content); //Set the template to the tooltip and show it ttp.set_content($("#ttContent").html()); ttp.show(); //Move the tooltip to the new position var popupElemet = ttp.get_popupElement(); setTimeout(function () { $telerik.setLocation(popupElemet, location); }, 10); } </script> <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" AutoTooltipify="true"OnClientShow="OnClientShow" /> <telerik:RadToolTip ID="RadToolTip1" runat="server" ManualClose="true" ShowCallout="false"></telerik:RadToolTip> <asp:Image ID="HelpImg" runat="server" ImageUrl="~/Examples1/eFlash.png" Style="cursor: pointer;" __alttext="View Page Help" AlternateText="View Page Help" /> <br /> <br /> <asp:Image ID="Image1" runat="server" ImageUrl="~/Examples1/eFlash.png" Style="cursor: pointer;" __alttext="View Page Help" AlternateText="View Cloud" /> <table id="ttContent" style="visibility: hidden;"> <tr> <td class="TitleBar" style="width: 400px; text-align: center;"> <asp:Label ID="PageTitle" runat="server"></asp:Label></td> </tr> <tr> <td style="text-align: justify;"> <asp:Label ID="PageDesc" runat="server" Text="Label"></asp:Label></td> </tr> <tr> <td></td> </tr> <tr> <td class="TitleBar" style="width: 400px; text-align: center;">Page Help</td> </tr> <tr> <td style="text-align: justify;"> <asp:Label ID="PageHelp" runat="server" Text="Label"></asp:Label></td> </tr> </table></form>Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items