Add RadToolTip to a Custom RadWindow Command Button

3 posts, 1 answers
  1. Xorcist
    Xorcist avatar
    92 posts
    Member since:
    Apr 2009

    Posted 01 May 2013 Link to this post

    I have used this tutorial:

    to add a custom button to the title bar of my RadWindow. I now want to add a RadToolTip to that button, so that when I click it I get a nice sticky tooltip which I can use in various ways. but for the life of me I can't get it working. Does anyone have any examples of doing this? I've tried specifying a unique ID for my command button, then using that in conjunction with the tooltip, but it doesn't appear to be working.

    my tooltip is defined as such:

    <telerik:RadToolTip Animation="Slide" ID="shellRadToolTip" IsClientID="true" Position="BottomLeft" runat="server" ShowEvent="OnClick" style="z-index:10000 !important;" TargetControlID="btnSwitchSite">

    my custom button looks like this:

    <li><a id="btnSwitchSite" class="rwControlButtonSite" href="javascript:void(0)" ></a></li>

    and if I add this code and try to handle it manually:

    <li><a id="btnSwitchSite" class="rwControlButtonSite" href="javascript:void(0)" onmousedown="winShell_Site(event);"></a></li>

    function winShell_Site(e) {
      var radToolTip = $find('<%= shellRadToolTip.ClientID %>');
      radToolTip.set_text('This is the new tool tip text to display');;

    the tooltip will only show if I uncomment the alert, but it does so at the bottom of the RadWindow, and not anywhere near the control it should be associated with.
  2. Answer
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 01 May 2013 Link to this post

    Hello Xorcist,

    If you modify the OnClientShow event like so:
    function OnClientShow(radWindow) {
                var TitleBar = radWindow.GetTitlebar();
                var parent = TitleBar.parentNode;
                var oUL = parent.getElementsByTagName('UL')[0];
                if (!( == "customprintbuttonID")) // Check if the element is already added
                    // If not - create and add the custom button
           = "192px";
                    var oLI = document.createElement("LI");
           = "customprintbuttonID"
                    var A = document.createElement("A");
                    A.className = "customprintbutton";
                    //A.href = "javascript:void(0)";
                    A.title = "Print Content";
                   // A.onmousedown = printWin;
                    oUL.insertBefore(oLI, oUL.firstChild);
                    var radToolTip = $find('<%= shellRadToolTip.ClientID %>');
                    //this is required so that RadWindow can display its titlebar properly after being modified

    I hope that helps.

  3. DevCraft R3 2016 release webinar banner
  4. Xorcist
    Xorcist avatar
    92 posts
    Member since:
    Apr 2009

    Posted 02 May 2013 Link to this post

    Thanks. Looks like I was just missing the set_targetControl(); part, once I added that in everything worked as expected.

Back to Top