Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > Close Tooltip On Click Away

• Levi Intermediate

  Posted on Apr 24, 2009 (permalink)

  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.
  

  Reply

• Shinu MVP

  Posted on Apr 27, 2009 (permalink)

  Hi Levi,
  
  In the following online demo the tool tip is being closed once you click outside the tool tip.
  http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx
  
  You may also try hiding the tooltip on clicking as shown below.
  
  ASPX:
  

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

  
  JS:
  

  <script type="text/javascript" >

  function Click()

  {

  var radToolTip = $find("<%= RadToolTip1.ClientID %>");

  if (radToolTip.isVisible())

  {

  radToolTip.hide();

  }

  }

  </script>

  
  
  Shinu
  

  Reply


• Yeroon

  Posted on Jan 13, 2012 (permalink)

  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()) {

                      activeTooltip.hide();

                  }

               });

          });

       </script>

  
  
  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;

  rttm.Controls.Add(tt);

  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > Close Tooltip On Click Away