Close Tooltip On Click Away

3 posts, 0 answers
  1. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 24 Apr 2009 Link to this post

    Is it possible to have a tooltip close when the user clicks away, so that it behaves more like a combo box? None of the options really support this as they either have to close it manually or risk that it will close when the user's mouse leaves the tooltip.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Apr 2009 Link to this post

    Hi Levi,

    In the following online demo the tool tip is being closed once you click outside the tool tip.

    You may also try hiding the tooltip on clicking as shown below.

    <form id="form1" runat="server" onclick="Click();" > 

    <script type="text/javascript" > 
    function Click() 
       var radToolTip = $find("<%= RadToolTip1.ClientID %>"); 
       if (radToolTip.isVisible()) 

  3. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 13 Jan 2012 Link to this post

    I add tooltips from codebehind to a RadToolTipManager. I want the tooltip to show on mouse over and hide on close click or clicking outside the tooltip.

    Here's how I solved it with jQuery

          <script type="text/javascript">
            $(document).ready(function () {
                $('body').bind('click', function (event) {
                    var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                    if (activeTooltip && activeTooltip.isVisible()) {

    I add tooltips to manager like this:
    I use a counter (i) to generate unique ID's for tooltips, as one and the same tooltip might be on the same page more than once. Also added a Print button to the tooltip title, for easy printing.
    RadToolTip tt = new RadToolTip();
    tt.TargetControlID = string.Format("tt{0}_{1}", tip.oid, i);
    tt.Text = tip.TooltipText;
    tt.HideEvent = ToolTipHideEvent.ManualClose;
    tt.OffsetY = 10;
    tt.Width = Unit.Pixel(500);
    tt.RelativeTo = ToolTipRelativeDisplay.Element;
    tt.ShowEvent = ToolTipShowEvent.OnMouseOver;
    SecureQuerystring sqs = new SecureQuerystring();
    sqs.ASCIIEncrypt("ttid=" + tip.oid + "&dt=" + DateTime.Now.Ticks);
    tt.Title = string.Format("<div style='width:490px;text-align:right; padding-top:4px; padding-right:18px;'><a href='PrintToolTip.aspx?tt={0}' target='_blank'><img src='Styles/Images/printer.png' border='0' alt='afdrukken' /></a></div>", SecureQuerystring.base64Encode(sqs.ciphertext));
    tt.IsClientID = true;
    tt.AutoCloseDelay = 5000;
    tt.EnableShadow = true;

Back to Top