How to hide "Close" button

[Adam Cole]

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.

[Martin]

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.

[Shinu]

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

[Adam Cole]

I tried the css solution and it worked.  Thank you.

[Martin]

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.

[zozzancs]

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>

[Alaa Majzoub]

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?

[Svetlina Anati]

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

[Basel Nimer]

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?

[Svetlina Anati]

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

[Basel Nimer]

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>

[Svetlina Anati]

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