Tooltip hover on image

4 posts, 0 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 17 Jul 2015 Link to this post

    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>

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 22 Jul 2015 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 22 Jul 2015 in reply to Danail Vasilev Link to this post

    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.

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 28 Jul 2015 Link to this post

    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
    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
Back to Top