Tooltip not showing small arrow on the side

2 posts, 0 answers
  1. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 Link to this post

    hi,

    I am using a radtooltip to make a dynamic tutorial.

    To be able to move the tutorial around I had to put it as relative to the BrowserWindow.
    Then I can change the offsets.

    The reason I am doing this is because I cannot attach the tutorial to anything because I am using a canvas to draw things.
    And the tutorial is pointing to those drawings on the canva.
    If I attach the tutorial to the canvas, it will just display on the side of the canvas, no near the controls.

    My problem with this is that I lose the small arrow on the side of the tutorial window.
    And I would like to have it back.

    Am I doing things right and there is no way to get the small arrow to show?
    Or is there an other way to do what I want that would restore the arrow ?

    This is my code for the tooltip:

    <telerik:RadToolTip
        runat="server"
        ID="RadToolTip3"
        Position="Center"
        Width="300px"
        Height="70px"
        Animation="Fade"
        ShowEvent="FromCode"
        HideEvent="FromCode"
        ShowDelay="0"
        RelativeTo="BrowserWindow"
        OnClientBeforeShow="PreTooltipShow"
        OffsetX="0"
        OffsetY="0">
        <div style="display: table;">
            <div style="display: table-row;">
                <div style="display: table-cell; vertical-align: middle; padding-top: 10px; padding-left: 10px; padding-bottom: 5px; padding-right: 10px;">
                    <asp:Label ID="Lbl_Tutorial" runat="server" Text="This is a test" />
                </div>
            </div>
            <div style="display: table-row;">
                <div style="display: table-cell; vertical-align: middle; text-align:right; padding-top: 10px; padding-left: 10px; padding-bottom: 5px; padding-right: 10px;">
                    <telerik:RadButton
                        ID="RdBttn_NextTutorial"
                        runat="server"
                        Text="Next"
                        AutoPostBack="false"
                        OnClientClicked="OnNextTutorial">
                    </telerik:RadButton>
                </div>
            </div>
        </div>
    </telerik:RadToolTip>

    With the following javascript to control it:

    function PreTooltipShow() {
        PageMethods.PreTooltipShow(PreTooltipShowCompleted);
    }
     
    function PreTooltipShowCompleted(pResult) {
        var tooltip = $find('RadToolTip3');
        if (pResult.length > 0) {
      
            tooltip.set_offsetX(parseInt(pResult[0]));
            tooltip.set_offsetY(parseInt(pResult[1]));
            tooltip.updateLocation();
     
            var label = document.getElementById('<%=Lbl_Tutorial.ClientID %>');
            label.innerHTML = pResult[2];
     
            var button = $find('RdBttn_NextTutorial');
            button.set_text(pResult[3]);
        }
        else {
            tooltip.hide();
        }
    }
     
    function OnNextTutorial() {
        var button = $find('RdBttn_NextTutorial');
        PageMethods.OnNextTutorial(PreTooltipShowCompleted);
    }




  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 05 Nov 2014 Link to this post

    Hi Mickael,

    When RelatriveTo=BrowserWindow and Position=Center the callout (the small arrow) is not shown and you can see this in action here: http://demos.telerik.com/aspnet-ajax/tooltip/examples/relativeto/defaultcs.aspx.

    What I can suggest is the following options:

    • Call the page method and only then show the tooltip instead of using the BeforeShow event. You can then use another set of RelativeTo+Position settings that will produce a callout.
    • Simply use a different Position value if this is OK for you from a user experience and appearance point of view.
    • Attach such a function to the OnClientShow event that will force the callout to show as if the Position is set to MiddleRight
      function OnClientShow(sender, args) {
          $telerik.$(".rtCallout", sender.get_popupElement()).addClass("rtCalloutMiddleLeft").css("visibility", "visible");
      }
      I cannot guarantee this will work in all cases, though, because it is not tested and expected of the callout to show in such a setup.

    Another thing you can consider is simply updating the top and left CSS properties of the tooltip with the new data instead of using the offset properties, as they are designed for small adjustments:

    var popup = tooltip.get_popupElement();
    popup.style.left = parseInt(pResult[0]);
    popup.style.top = parseInt(pResult[1]);
    //tooltip.set_offsetX(parseInt(pResult[0]));
    //tooltip.set_offsetY(parseInt(pResult[1]));
    //tooltip.updateLocation();

    I hope this helps.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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