Tooltip disappears on hover

7 posts, 0 answers
  1. Orest
    Orest avatar
    31 posts
    Member since:
    Apr 2009

    Posted 05 May 2011 Link to this post

    Hello
    I have telerik:RadListBox.  I have a tooltip manager .
    <telerik:RadToolTipManager runat="server" ID="radTTMgr" CssClass="prodOPB" Position="BottomRight" RelativeTo="Element"
        Width="180px" Height="100px" Animation="Fade" ShowCallout="false" OffsetX="-70" OffsetY="-1"
        ShowDelay="0" ShowEvent="OnClick" OnAjaxUpdate="OnAjaxUpdate" Skin="MySkin" HideEvent="LeaveTargetAndToolTip"       
        EnableEmbeddedSkins="false" >
    </telerik:RadToolTipManager>

    On RadListBox OnItemDataBound  I add controls to target controls collection
    Control image = e.Item.FindControl("imgMenu");
    this.radTTMgr.TargetControls.Add(image.ClientID, e.Item.DataKey.ToString(), true);

    Everything is working fine except one minor thing that needs to be adjusted. When I do following sequence tooltip closes
    1.   Click on target
    2.   Move mouse to tooltip
    3.   Move back to target and tooltip disappears.
    At the same time as I do step 3 my ListItem is getting a “hover” class, so I’m wondering if that’s what causes my issue. I tried to use OnClientBeforeHide  to cancel close if my mouse is over target control but I could not figure that out. Can you please help
    Thank you
  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 05 May 2011 Link to this post

    Hi Orest,

    I think you can set the HideEvent property to "ManualClose" and that should solve your problem. The tooltip will display until you manually close it by clicking the X in the upper right corner, or trigger a different tooltip.

    I hope this is what you're looking for!

    -Gimmik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Orest
    Orest avatar
    31 posts
    Member since:
    Apr 2009

    Posted 05 May 2011 Link to this post

    No, requirement states that I should hide tooltip when user leaves Target or tooltip and that’s exactly why I use HideEvent="LeaveTargetAndToolTip".  It seems too me that’s a bug and I need to know how to work around it
  5. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 05 May 2011 Link to this post

    Hi Orest,

    Yea - I can see what you're talking about. I went to the demo link (below) and inputted the properties from your code snippet. The same thing happened to me where the tooltip disappeared. The documentation seems to imply that the tooltip should remain on the page while moving between the tooltip and the target. Honestly, when I have an issue like this I usually submit my whole project to Telerik support. You may want to try that. Sorry I wasn't able to help.

    -Gimmik

    http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 May 2011 Link to this post

    Hello guys,

     We actually recently found that when ShowEvent is different than OnMouseOver and HideEvent="LeaveTargetAndTooltip", if the mouse enters the tooltip and gets back on the target, the tooltip unexpectedly hides. This problem is already fixed and the fix will be available in the next internal build as well in later releases (I recommend to wait until the upcoming SP, which is scheduled for next week), upgrade to it and test again.

    Greetings,
    Svetlina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Orest
    Orest avatar
    31 posts
    Member since:
    Apr 2009

    Posted 19 May 2011 Link to this post

    For the time being, is it possible to figure out if mouse is above target control in
    OnClientBeforeHide so I can cancel close event? We need to do a lot of testing before new version of Telerik is approved to go to prod
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 May 2011 Link to this post

    Hi Orest,

     Basically, checking whether the mouse position is on the target and cancelling the hide is what you need but you cannot get the mouse position with that setup under all browsers correctly because you do not have the event passed to the OnClientBeforHide handler. That is why the possible solutions without upgrade are as follows:

    1) We can provide an override if you request such - it will make things work with the current settings without the need to add further custom code. However, I do not recommend this because it could cause issues in later upgrades.

    2) You can set HideEvent="FromCode" and implement the desired logic. I prepared for you some sample code which you can use as a start point and improve further if you want:

    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="m" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
      
            var keepActive = true;
      
            function OnClientShow(sender, args) {
                var target = sender.get_targetControl();
                if (!target) return;
      
                var popupElemenet = sender.get_popupElement();
      
                target.onmouseout = function () {
                    keepActive = false;
                    setTimeout(function () {
                        sender.hide();
                    }, sender.get_hideDelay());
      
                }
      
                popupElemenet.onmouseout = function (e) {
                    if (!e) e = window.event;
                    keepActive = $telerik.isMouseOverElementEx(target, e);
                    setTimeout(function () {
                        sender.hide();
                    }, sender.get_hideDelay());
                };
      
                popupElemenet.onmouseover = function () {
                    keepActive = true;
                };
      
            }
      
            function OnClientBeforeHide(sender, args) {
      
                args.set_cancel(keepActive);
      
            }
        </script>
        <telerik:RadToolTipManager runat="server" ID="radTTMgr" CssClass="prodOPB" Position="BottomRight"
            RelativeTo="Element" Width="180px" Height="100px" Animation="Fade" ShowCallout="false"
            OffsetX="-70" OffsetY="-1" ShowDelay="0" ShowEvent="OnClick" HideEvent="FromCode"
            OnClientBeforeHide="OnClientBeforeHide" OnClientShow="OnClientShow">
            <TargetControls>
                <telerik:ToolTipTargetControl TargetControlID="target" />
            </TargetControls>
        </telerik:RadToolTipManager>
        <asp:HyperLink ID="target" runat="server" Text="Show Tooltip"></asp:HyperLink>
        </form>
    </body>
    </html>

    I hope that my reply and the developed workaround are helpful and for your convenience I attached my test demo page - let me know how it goes.

    All the best,
    Svetlina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017