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

Tooltip not showing small arrow on the side

1 Answer 103 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Mickael
Top achievements
Rank 1
Mickael asked on 04 Nov 2014, 01:53 PM
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);
}




1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 05 Nov 2014, 12:19 PM

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.

 
Tags
ToolTip
Asked by
Mickael
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or