Tooltip hover on image

[Kurt Kluth]

We have taken advantage of using the Tooltip in a user control to display our page help.  The problem is we would like to add "View Page Help" while hovering over the image ("HelpImg") w/o it effecting the RadToolTip content.  We have attempted to set the ​AlternateText and it will then replace the RadToolTip user control content with that message instead of displaying the help.

 

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" />
<uc1:PageHelp ID="PageHelp" runat="server" />
<asp:Image ID="HelpImg" runat="server"  ImageUrl="~/images/Menu/help_icon.png" style="cursor: pointer;" alttext="View Page Help"  />

Page Help.ascx

<telerik:RadToolTip runat="server" ID="RadToolTip1" Width="400px" ShowEvent="OnClick" RelativeTo="Element" Animation="Resize" TargetControlID="HelpImg" IsClientID="false" HideEvent="ManualClose" Position="TopRight">
    <table>
        <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>
</telerik:RadToolTip>

 

[Danail Vasilev]

Hello Kurt,

You can create the tooltip on the client-side. Please examine the following demo for details on the matter -
http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx

Regards,
Danail Vasilev
Telerik

[Kurt Kluth]

Not quite what I was looking for.  In the demo that you provided, when hovering over say Germany, it would read "Click to view customers in Germany" as the tooltip.  Upon clicking on it then it would show the tooltip. See image of what I am referring to.

When a user hovers over the cloud it displays "View files sent via Policyholder Cloud".  I need when a user hovers over the help_icon.png it display "Click to view page help". 

Hoping this clarifies things.

[Danail Vasilev]

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:

<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