Tooltip for disabled elements

2 posts, 0 answers
  1. Sunil
    Sunil avatar
    242 posts
    Member since:
    Jan 2004

    Posted 07 Feb Link to this post

    Requirements

    Telerik Product and Version

    Q2 2015 and later

    Supported Browsers and Platforms

    Chrome, Firefox, Edge, IE8 and later

    Components/Widgets used (JS frameworks, etc.)

    jQuery


    PROJECT DESCRIPTION 
    This JavaScript library is used for displaying tooltips for disabled elements. For example, you could use it to display a tooltip for a disabled button. You must have jQuery included in the page for this library to work. 

    An object called ttd is exposed by this library.

    This library works across all RenderModes and also all Telerik skins, both on mobile and non-mobile screens.

    DEMO

    An online demo for this can be see at following link: Online Demo.

    Also, the attached files can be used to create a demo on your laptop. Just unzip the attached zipped file to the root of your website project in Visual Studio. Make sure to add reference to Telerik.Web.UI.dll and Telerik.Web.UI.Skins.dll. Set ToolTipForDisabledElements.aspx as start page in your Visual Studio website project and then build/run your website.

    There can be many scenarios where it's desirable to display a tooltip for disabled elements, so user of your app understands why these elements are disabled.

     

    INCLUDE this library in your page

    The first step in using this library is to include the JavaScript file  RadToolTipifyForDisabled.min.js in your master page or content page. This file can be found in attached demo files under Scripts folder.

    You can use either RadScriptManager or a simple script tag to include this file. If you use a script tag then make sure to add this script tag towards the end of your page markup just before the closing form tag else you would get JavaScript errors when your page renders.

    INCLUDE JavaScript file using RADSCRIPTMANAGER

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePartialRendering="true">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                    <asp:ScriptReference Path="~/Code Library Files/Scripts/RadToolTipifyForDisabled.min.js"/>
                </Scripts>
    </telerik:RadScriptManager>

     

    INCLUDE JavaScript file using SCRIPT TAG
    <script src="Scripts/RadToolTipifyForDisabled.min.js" type="text/javascript"></script>
    </form>
    </body>
    </html>



    USING THIS LIBRARY to show tooltip for disabled element

     

    There are three ways you can show tooltip for a disabled element. When using METHOD 2 or METHOD 3 mentioned below, then you must have a single RadToolTip in your page that is dedicated to showing tooltips for disabled elements. You can set the tooltip for each disabled element using this library even when there is just one RadToolTip for all disabled elements. On the other hand, if you use METHOD 1 then you would need a separate RadToolTip for each disabled element.

    METHOD 1: Include a RadToolTip in the page markup whose TargetControlID property is set to the id of disabled control as in markup below. This is the simplest way to tooltipify a disabled element and requires no JavaScript code to be written.

    <telerik:RadToolTip ID="radToolTip2" runat="server" Text="<strong>Tooltip defined using markup only for a disabled button.</strong>" Position="MiddleRight" RelativeTo="Element" RenderMode="Auto"
               TargetControlID="btn123" IsClientID="false"></telerik:RadToolTip>
     
    <asp:Button ID="btn123" runat="server" Text="Disabled button (shows a tooltip even in disabled state)" Enabled="false" />



    METHOD 2: Call the method ttd.radToolTipifyDisabledElement on client-side. This method can be called from any appropriate event.
    function pageLoad() {
          //ttd is the object exposed by this library and stands for ToolTipify Disabled element.
     
          //First and foremost, let the library know the dedicated RadToolTip you are going to use for disabled elements
          //NOTE : if you have included in your page markup a RadToolTip for each disabled element so the target control of each such RadToolTip is a disabled element then you can skip this step
          ttd.radToolTipIdForDisabledElement = "<%=radToolTip1.ClientID%>";
     
          //METHOD 2: Call the method ttd.radToolTipifyDisabledElement to dynamically toottipify a disabled element
          //this method can be called from any appropriate event and need not be called from pageLoad event
          ttd.radToolTipifyDisabledElement(document.getElementById("<%=rbtn1.ClientID%>"), "This is a Telerik RadButton 434. <b>This tooltip is set using the method ttd.radToolTipifyDisabledElement.</b>");
      }


    METHOD 3: Set the property ttd.disabledToolTips which is a collection of disabled tooltip objects. This must be set on client-side in pageLoad event.
    function pageLoad() {
         //ttd is the object exposed by this library and stands for ToolTipify Disabled element.
     
         //First and foremost, let the library know the dedicated RadToolTip you are going to use for disabled elements
         //NOTE : if you have included in your page markup a RadToolTip for each disabled element so the target control of each such RadToolTip is a disabled element then you can skip this step
         ttd.radToolTipIdForDisabledElement = "<%=radToolTip1.ClientID%>";
     
     
         //METHOD 3: Set up a collection of JSON objects as below to let the library know which disabled elements you want to tooltipify
         //NOTE: this approach requires that you set this collection only in pageLoad event else setting this property will have no effect
         ttd.disabledToolTips = [{
                 id: "<%=btn1.ClientID%>",
                 disabledToolTipText: "This is an ASP button"
             },
             {
                 id: "<%=rbtn1.ClientID%>",
                 disabledToolTipText: "This is a Telerik RadButton"
             },
             {
                 id: "<%=txt1.ClientID%>",
                 disabledToolTipText: "This is an ASP TextBox"
             }
     
         ];
     }


    EVENT exposed by this library

    You can also make use of  beforeDisabledToolTipShow event exposed by this library to change tooltip text of a disabled element just before it shows. You can execute some custom logic in this event if you need to.  This event is explained with detailed comments in code snippet below.

    This event must be subscribed to in pageLoad event.

    function pageLoad() {
         //ttd is the object exposed by this library and stands for ToolTipify Disabled element.
     
         //subscribe to event before disabled tooltip is shown, if you need to
         //NOTE: do this in pageLoad event or any other appropriate event but before the disabled control is hovered over
         ttd.beforeDisabledToolTipShow = beforeDisabledToolTipShowing;
     
     }
     
     //below is the event of ttd.beforeDisabledToolTipShow that was subscribed to in pageLoad event.
     //it fires just before the tooltip for the disabled element is about to show and it cannot be used to cancel the tooltip showing
     function beforeDisabledToolTipShowing(sender, args) {
         //NOTE: sender is the RadTooltip for disabled element while args is the disabled element for which tooltip is being shown
         //developer can change the tooltip text for disabled element in this event
         if (args.id.indexOf("rbtn1") >= 0) {
             sender.set_text("Using 'beforeDisabledToolTipShow' event to change tooltip text. This is a disabled <b>RadButton</b>");
         }
     }







  2. Vessy
    Admin
    Vessy avatar
    1600 posts

    Posted 10 Feb Link to this post

    H Sunil,

    Thank you for sharing your solution with us. Your Telerik points have been updated accordingly.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top