Tooltip not showing small arrow on the side

[Mickael]

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);
}

​

[Marin Bratanov]

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