Tooltip Show/Hide event

6 posts, 0 answers
  1. Marcus
    Marcus avatar
    4 posts
    Member since:
    Jul 2013

    Posted 30 Jan 2014 Link to this post

    Hi

    I have a tooltip which I would like to show when the user either hover the tooltip or clicks on it. It works fine when the user hover it. However if the user clicks on it, the tooltip doesn't show. My guess is that the click trigger some kind of hide event. Is there a way to show the ToolTip on both click and MouseOver?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Jan 2014 in reply to Marcus Link to this post

    Hi Marcus,

    Please have a look into the following code snippet to show the RadToolTip on both Click and MouseOver event.

    ASPX:
    <telerik:RadToolTip ID="RadToolTip1" ShowEvent="FromCode" runat="server" Position="MiddleRight"
        TargetControlID="txtFirstName" RelativeTo="Mouse">
    </telerik:RadToolTip>
    <asp:TextBox ID="txtFirstName" TabIndex="1" runat="server" onclick="Show();" onmouseover="Show();">
    </asp:TextBox>

    JavaScript:
    <script type="text/javascript">
        function Show() {
            var radToolTip = $find("<%= RadToolTip1.ClientID %>");
            radToolTip.set_text("This is the new tool tip text to display");
            radToolTip.show();
        }
    </script>

    Hope this will helps you.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marcus
    Marcus avatar
    4 posts
    Member since:
    Jul 2013

    Posted 31 Jan 2014 in reply to Shinu Link to this post

    Hi, It works quite good but I have to tweak the hide event a bit before I am satisified with that part.

    What I forgot to say in my original question was that I use RadTooltipManager and loads a usercontrol on ajaxupdate. However, with the sample code you provided the ajaxupdate is not called anymore and the tooltip is located at the bottom of the page instead of below the image I have as icon. Do you know why this happens?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Feb 2014 in reply to Marcus Link to this post

    Hi Marcus,

    Please try to set the RelativeTo property of RadToolTip to Element. The RelativeTo property set whether the tooltip should appear relative to the mouse, the target element or to the browser view port. It works in cooperation with Position property.
    The setting RelativeTo=BrowserWindow will show the RadToolTip relative to the browser, not to a target control even if a TargetControlID has been specified. Please have a look into this online demo.

    Thanks,
    Shinu.
  6. Marcus
    Marcus avatar
    4 posts
    Member since:
    Jul 2013

    Posted 03 Feb 2014 Link to this post

    Ok, do you have any idea why no AJAX call is executed aswell? Do I have do do this manually if the showevent is from code?
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 03 Feb 2014 Link to this post

    Hello Marcus,

    Shinu's code uses a standalone tooltip, which cannot load content on demand. This is why the AjaxRequest event is not fired and you do not get your user control.

    If you need to attach tooltips dynamically to elements and load content on demand, I advise that you examine the following demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx. You will see a small timeout before the call to show(), which is needed, as shown in this sticky thread: http://www.telerik.com/forums/changing-targetcontrol-on-the-client.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017