Captch Refresh Button Tooltip

3 posts, 0 answers
  1. Hiren
    Hiren avatar
    62 posts
    Member since:
    Dec 2010

    Posted 06 Feb 2012 Link to this post

    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.
  2. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 08 Feb 2012 Link to this post


    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

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
                background: url('images/refresh.png') no-repeat 0 0;
                width: 25px;
                height: 25px;
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server">
        <script type="text/javascript">
            function RefreshImage() {
                var captcha = $find("<%=RadCaptcha1.ClientID %>");
                document.location = $get(captcha.get_id() + "_CaptchaLinkButton").href;
                        <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Invalid Code" ValidationGroup="Group"
                            EnableRefreshImage="true" >
                    <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="" />
                        <asp:Button ID="Button1" runat="server" Text="Validate Code" ValidationGroup="Group" />

    Hope this helps!
  3. Slav
    Slav avatar
    1359 posts

    Posted 09 Feb 2012 Link to this post

    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,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top