This is a migrated thread and some comments may be shown as answers.

Close Tooltip On Click Away

2 Answers 294 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Levi
Top achievements
Rank 1
Levi asked on 24 Apr 2009, 06:25 PM
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 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 27 Apr 2009, 07:26 AM
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
0
Yeroon
Top achievements
Rank 2
answered on 13 Jan 2012, 03:29 PM
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);

Tags
ToolTip
Asked by
Levi
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Yeroon
Top achievements
Rank 2
Share this question
or