Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Captcha > Captch Refresh Button Tooltip

Not answered Captch Refresh Button Tooltip

Feed from this thread
  • Hiren avatar

    Posted on Feb 6, 2012 (permalink)

    How to remove the tooltip from RadCaptch Refresh Button as it is showing the Path of the image. Attached screenshot.
    Also let us know if we need any custom tooltip how to set for Captch Refresh Button.
    Attached files

    Reply

  • jumpstart Master avatar

    Posted on Feb 8, 2012 (permalink)

    Hiren:

    One approach is to set RadCaptcha property EnableRefreshImage="true", but to move the image refresh link's text off-screen using CSS. Then, you can replace the link click functionality with an asp:button that features your "Refresh.png". You can associate a RadToolTip with this button and set the tooltip's display text as needed.

    The JavaScript function: RefreshImage() is assigned to the "onclick" event of the button.

    See the demo in action at http://screencast.com/t/EFPsQnJoGaB

    Default.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
                #btnRefreshImage
            {
                background: url('images/refresh.png') no-repeat 0 0;
                width: 25px;
                height: 25px;
            }
     
            .rcRefreshImage
            {
                text-indent:-9999px;
            }
        </style>
     
    </head>
    <body>
        <form id="form1" runat="server">
      
        <telerik:RadScriptManager ID="ScriptManager1" runat="server">
      
        </telerik:RadScriptManager>
      
        <script type="text/javascript">
     
            function RefreshImage() {
                var captcha = $find("<%=RadCaptcha1.ClientID %>");
                document.location = $get(captcha.get_id() + "_CaptchaLinkButton").href;
            }
      
        </script>
        <div>
            <table>
                <tr>
                    <td>
                        <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Invalid Code" ValidationGroup="Group"
                            EnableRefreshImage="true" >
                        </telerik:RadCaptcha>
                    </td>
                    <td align="left">
                        <telerik:RadToolTip ID="Tooltip1" runat="server"  IsClientID="true" TargetControlID="btnRefreshImage" >Refresh Image</telerik:RadToolTip>
                        <input type="button" id="btnRefreshImage" onclick="RefreshImage(); return false;"
                            value="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button1" runat="server" Text="Validate Code" ValidationGroup="Group" />
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>

    Hope this helps!

    Reply

  • Slav Slav admin's avatar

    Posted on Feb 9, 2012 (permalink)

    Hi Hiren,

    Another option is to use CSS styles in order to set an image as a background of the refresh link. Such approach is used in the online demo Captcha / Localization.

    You can set the text of the displayed tooltip by changing the value of the title attribute of the Refresh Image link element via client-side script, as shown in the following code snippet:
    var captchaHtmlElement = $find("<%=RadCaptcha1.ClientID %>").get_element(); // use the ID of your captcha instead 'RadCaptcha1'
    $telerik.$(captchaHtmlElement).find(".rcRefreshImage").attr("title", "Custom tooltip");

    All the best,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Captcha > Captch Refresh Button Tooltip