How to hide "Close" button

12 posts, 1 answers
  1. Adam Cole
    Adam Cole avatar
    31 posts
    Member since:
    Nov 2004

    Posted 23 Jun 2009 Link to this post

    Hi,
      I use Tooltip as a confirmation box in my project.  I set ManualClose to True and add a "yes" and a "no" button inside the tooltip.

      The user has to click either the "yes" or "no" button to close the tooltip.  Is there a way to hide the "close" button at the top-right corner in the tooltip?  Maybe it's very easy, but I don't know how.

    Thanks.
  2. Answer
    Martin
    Admin
    Martin avatar
    585 posts

    Posted 24 Jun 2009 Link to this post

    Hi Adam Cole,

    The easiest way to hide the close button of RadToolTip is by using the following CSS code:

    .rtCloseButton
    {
        display: none !important;
    }


    Do not remove the !important flag, otherwise the fix will not work.

    Kind regards,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Jun 2009 Link to this post

    Hi Adam Cole,

    One suggestion is setting the HideEvent of RadToolTip as FromCode adn explicitly hide the tooltip when clicking the button. Have a look at the code below.

    ASPX:
     
    <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="Panel1" HideEvent="FromCode">                  
        Hi, hello. This is my tooltip. <br /> <br />  
        <input type="button" value="Yes" onclick="hide(this);" />   
        <input type="button" value="No" onclick="hide(this);" />  
    </telerik:RadToolTip> 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

    JavaScript:
     
    <script type="text/javascript"
    function hide(sender) 
        var tooltip = Telerik.Web.UI.RadToolTip.getCurrent(); 
        if (tooltip) 
        { 
            tooltip.hide(); 
            var text = document.getElementById("TextBox1"); 
            if(sender.value == "Yes"
            {         
                text.value = "Clicked  - Yes"
            } 
            else 
            { 
                text.value = "Clicked  - No"
            } 
        } 
    </script> 

    Shinu
  5. Adam Cole
    Adam Cole avatar
    31 posts
    Member since:
    Nov 2004

    Posted 24 Jun 2009 Link to this post

    I tried the css solution and it worked.  Thank you.
  6. Martin
    Admin
    Martin avatar
    585 posts

    Posted 25 Jun 2009 Link to this post

    Hello Adam Cole,

    I am happy I was able to help.

    Kind regards,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. zozzancs
    zozzancs avatar
    24 posts
    Member since:
    Dec 2009

    Posted 16 Mar 2010 Link to this post

    Thank you Shinu!

    Really really nice :)

    I used your code's easier version to do the following:
    I have a basic imagegallery with tooltips. I wanted to close the tooltip by clicking on the image inside the tooltip.
    My problem was that the tooltip is loaded dinamically from codebehind as a usercontrol like in this demo:
    http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx

    So I could not place the code inside the tooltip definition, since i don't have one :)
    I use ToolipManage, like in the demo above.

    When I placed the javascript code inside the usercontrol, it did not work. Then I figured out that if I place the javascript function definition inside the main aspx, i can call it from the usercontrol.

    Main aspx part:
     
            function hideme() { 
                var tooltip = Telerik.Web.UI.RadToolTip.getCurrent(); 
                 
                if (tooltip) { 
                    tooltip.hide(); 
                } 
            }  
       

    The complete usercontrol:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImgDetails.ascx.cs" 
        Inherits="ePicture.ImgDetails" %> 
    <div> 
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br /> 
        <asp:Image ID="Image1" runat="server" onclick="hideme();" /> 
    </div> 
     





  8. Alaa Majzoub
    Alaa Majzoub avatar
    49 posts
    Member since:
    Nov 2007

    Posted 22 Jun 2010 Link to this post

    This trick used to work on Q2 2009, Now in Q1 2010, the tooltip disappears after a while, even that i set HideEvent=FromCode

    Any suggestions?

  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Jun 2010 Link to this post

    Hi Alaa,

    There are not changes applied to this functionality and I am not sure why you experience different behavior with the different versions. However, what I assume is that the tooltip is closed due to the AutoCloseDelay property. Its default value is 400ms and you should set 0 as shown below:

    AutoCloseDelay="0"

    Please, test this suggestion and let me know whether this resolved the problem.


    All the best,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 23 Jun 2010 Link to this post

    I suspected that, but found no enough information about this new property, so i set it to 2000000, is setting it to 0 disable it?

    i wonder why this property should be active when i am setting HideEvent=FromCode?

  11. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 Jun 2010 Link to this post

    Hi Basel,

    Would you please tell what is the exact version of RadControls you are using? In the common case, the tooltip works as you explain and when HideEvent="FromCode" it stays open until:

    1) explicit call to hide is done
    or
    2) another tooltip should show.

    You can test this on the demo below:

    http://demos.telerik.com/aspnet-ajax/tooltip/examples/hideevent/defaultcs.aspx

    Since I did not have your code I just assumed that the issue you are facing could be related to the AutoCloseDelay property but this assumption does not count your configuration - if the hide event is correctly configured to be from code and the above two scenarios are not involved the tooltip should stay opened as in the demo.

    In case you need further assistance or you want to additionally examine the exact setup and why this happens, please share fully runnable sample code here and I will check it out and let you know what is the reason for this behavior. Note, also, that you should specify the version you are using because this is an old thread.


    Greetings,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 01 Jul 2010 Link to this post

    I am using version 2010.1.519.20

    Now, the strange thing is that in other places, it works as you specified, but in specific parts of the system, it works as i specified.

    the AutoCloseDelay did the trick, unfortunately; the system is too complex to separate a sample copy, below is the Tag for the tooltip

    <telerik:RadToolTip ID="ttt" Skin="Simple" RelativeTo="BrowserWindow"  
        HideEvent="FromCode"  AutoCloseDelay="0" Position="Center" IsClientID="false" runat="server" Modal="true" 
        Animation="None"  Sticky="false"  Width="437px"
        <div style="display:table;background-color:#FFF7BD;width:100%;padding:0;margin:0;" > 
            <div style="text-align:center;padding-top:20px;"
                <img src="DialogLogo.gif" alt="" /> 
            </div> 
            <br /> 
            <div style="text-align:center;background:url('DialogSeparator.gif') repeat-x center center;margin:0 20px; height:1px;"
            </div> 
            <br /> 
            <div style="padding-bottom:30px;padding-left:20px;padding-right:20px;"
                <asp:PlaceHolder ID="tttUC" runat="server"></asp:PlaceHolder> 
            </div> 
        </div> 
    </telerik:RadToolTip> 

  13. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 Jul 2010 Link to this post

    Hello Basel,

    Thank you for the provided code, I tested it and I was able to reproduce the problem. The issue, however, is not a bug in tne control but it is caused by wrong configuration.

    The X button used to appear when you set the RadToolTip's ManualClose property to true. However, now the ManualClose and the Sticky properties are obsolete - they still can be used but we do not recommend this because problems may occur especially when using both of them in a combination because this scenario is not a valid one. I strongly recommend to use the new property which replaces them - the HideEvent property which is demonstrated here.

    This being said, you should remove the Sticky setting - after I did this everything started working as expected without th eneed of setting AutoCloseDelay.


    Sincerely yours,
    Svetlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017