This is a migrated thread and some comments may be shown as answers.

Tooltip hover on image

3 Answers 111 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Kurt Kluth
Top achievements
Rank 1
Kurt Kluth asked on 17 Jul 2015, 02:34 PM

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>

 

3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 22 Jul 2015, 11:29 AM
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
0
Kurt Kluth
Top achievements
Rank 1
answered on 22 Jul 2015, 12:42 PM

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.

0
Danail Vasilev
Telerik team
answered on 28 Jul 2015, 02:11 PM
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
Tags
ToolTip
Asked by
Kurt Kluth
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Kurt Kluth
Top achievements
Rank 1
Share this question
or