Tooltip for Titlebar Icon

7 posts, 1 answers
  1. Monique
    Monique avatar
    3 posts
    Member since:
    Jan 2007

    Posted 14 Nov 2013 Link to this post

    Is it possible to add a tooltip to the TitleBar icon, preferably on the server side? I know the tooltip for the TitleBar buttons can be changed thru Telerik.Web.UI.RadWindowUtils.Localization , but there isn't anything for Icon. 

    My app allows the user to open multiple windows for various object (such as classes and students). These windows can be minimized, so the user may end up with numerous minimized windows. When a window is minimized I want to be able to identify through the TitleBar icon, with the help of a tooltip, the name of the student.  Note, I do not want to use the TitleBar title as that is already used to identify the class. Besides when the radwindow is minimized the TitleBar title is not fully viewable.

    Thanks in advance!
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Nov 2013 Link to this post

    Hi Monique,

    This can be done with a couple of lines:
    1) add a custom property that will hold the desired attribute to the RadWindow markup declaration
    2) use some JavaScript to set it to the icon's title attribute:

    <script type="text/javascript">
        function OnClientShow(sender, args)
        {
            $telerik.$(".rwIcon", sender.get_popupElement()).attr("title", sender.get_element().getAttribute("IconTitle"));
        }
    </script>
    <telerik:RadWindow ID="RadWindow1" runat="server" OnClientShow="OnClientShow" IconTitle="my icon title"
        OpenerElementID="Button1">
    </telerik:RadWindow>
    <asp:Button ID="Button1" Text="open RW" runat="server" />


    An you can set this attribute from the code-behind, of course:
    RadWindow1.Attributes.Add("IconTitle", "the desired title");


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Monique
    Monique avatar
    3 posts
    Member since:
    Jan 2007

    Posted 15 Nov 2013 Link to this post

    Hi Marin, Thanks for the quick reply! It seems to work, but it depends on the method used to open the radwindow. If the radwindow is displayed using the Show method it works. However, when using Open it does NOT work. See attached sample. I need to use the Open method as I need to display multiple instances of the same radwindow (hence the reason for the icon tooltip). Is there anyway to get this to work with the Open method?

    Thanks!

    p.s. I tried to attached the zip file, but it doesn't allow for zip files. So, here is the pages.

    <%@ Page Language="VB" AutoEventWireup="false" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title></title>

    </head>

    <body>

    <form id="form1" runat="server">

    <telerik:RadScriptManager ID="RScriptManager" runat="server" />

    <telerik:RadScriptBlock ID="RScriptBlock" runat="server">

    <script type="text/javascript">

    function OnClientShow(sender, args) {

    $telerik.$(".rwIcon", sender.get_popupElement()).attr("title", sender.get_element().getAttribute("IconTitle"));

    }

    function OpenWindow() {

    var mgr = $find("<%= wmRadWindowManager.ClientID%>");

    var tooltip = document.getElementById('<%= txtTooltip.ClientID%>').value;

    $telerik.$(".rwIcon", mgr.get_popupElement()).attr("title", mgr.get_element().setAttribute("IconTitle",tooltip));

    mgr.setUrl("rw.aspx");

    mgr.open("rw.aspx", null)

    //mgr.show(); //must use show for IconTitle will not show

    }

    function ShowWindow() {

    var mgr = $find("<%= wmRadWindowManager.ClientID%>");

    var tooltip = document.getElementById('<%= txtTooltip.ClientID%>').value;

    $telerik.$(".rwIcon", mgr.get_popupElement()).attr("title", mgr.get_element().setAttribute("IconTitle", tooltip));

    mgr.setUrl("rw.aspx");

    //mgr.open("rw.aspx", null)

    mgr.show(); //must use show for IconTitle will not show

    }

    </script>

    </telerik:RadScriptBlock>

    <telerik:RadWindowManager ID="wmRadWindowManager" runat="server"

    Behaviors="Minimize, Close, Move"

    Height="200px"

    IconTitle="IconTitle in Declaration"

    Left="225px"

    Modal="false"

    OnClientShow="OnClientShow"

    Title="Class"

    Top="50px"

    ReloadOnShow="true"

    ShowContentDuringLoad="false"

    VisibleOnPageLoad="false"

    VisibleStatusbar="false"

    Width="300px" />

    <br /><br />

    <asp:Label ID="lblTooltip" runat="server" Text="Add Tooltip" />

    <asp:TextBox ID="txtTooltip" runat="server" Width="300px" />&nbsp;

    <asp:Button ID="btnOpenRW" Text="Open RW" runat="server" OnClientClick="OpenWindow();return false;" />

    <asp:Button ID="btnShowRW" Text="Show RW" runat="server" OnClientClick="ShowWindow();return false;" /><br /><br />

    <asp:Label ID="lblInfo" runat="server" Text="With Open RW I can open multiple instances of the same window, but the Icon Tooltip does NOT show. " /><br />

    <asp:Label ID="Label1" runat="server" Text="With Show RW I can NOT open multiple instances of the same window, but the Icon Tooltip does show. " />

    </form>

    </body>

    </html

    >

    <%@ Page Language="VB" AutoEventWireup="false" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title></title>

    </head>

    <body>

    <form id="form1" runat="server">

    <asp:Label ID="Label1" runat="server" Text="Test Tooltip"></asp:Label>

    </form>

    </body>

    </html>


     

     

  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 19 Nov 2013 Link to this post

    Hello Monique,

    It does not matter how you open the RadWindow, in any case you can look for the icon and set its title attribute. What is important is to get the needed string to the corresponding RadWindow. I have shown one way that lets you use a custom attribute for instances you declare in the markup, or create in the code-behind.

    When you use the RadWindowManager to create a RadWIndow instance dynamically (i.e., one that is not declared in your code), there is no way to set a custom attribute that you can use.

    Also, note that you need to use the RadWindow instance, not hte RadWindowManager instance to set the title to. You must not call the show() method for a tooltip manager, not any other of the members of the RadWindow client-side API. The manager has another function and a separate API.

    Thus, you only need to show a RadWindow you have declared with the desired custom attribute:
    function OnClientShow(sender, args) {
        $telerik.$(".rwIcon", sender.get_popupElement()).attr("title", sender.get_element().getAttribute("IconTitle"));
    }
     
    function OpenWindow() {
        var mgr = $find("<%= wmRadWindowManager.ClientID%>");
        mgr.open("rw.aspx", "someNamedInstance")
    }

    Note how there is no other code when opening the popup, its OnClientShow handler will get the custom attribute and use it. Now, the main change is that you need a named instance declared so you can set the custom attribute, for example:
    <telerik:RadWindowManager ID="wmRadWindowManager" runat="server"
                              Behaviors="Minimize, Close, Move"
                              Height="200px"
                              IconTitle="IconTitle in Declaration"
                              Left="225px"
                              Modal="false"
                              OnClientShow="OnClientShow"
                              Title="Class"
                              Top="50px"
                              ReloadOnShow="true"
                              ShowContentDuringLoad="false"
                              VisibleOnPageLoad="false"
                              VisibleStatusbar="false"
                              Width="300px">
                              <Windows>
                                <telerik:RadWindow ID="someNamedInstance" runat="server" IconTitle="desired icon title for this instance"></telerik:RadWindow>
                              </Windows>
    </telerik:RadWindowManager>

    Otherwise, you will need to devise your own logic in the OnClientShow handler to get the needed string (e.g., a page method, a callback, a webservice call so you can get the data from the server, if this is where it is stored), or some customn logic that depends on your business needs.

    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Monique
    Monique avatar
    3 posts
    Member since:
    Jan 2007

    Posted 20 Nov 2013 Link to this post

    I got it to work! Thanks Marin, you're the best!
  7. As
    As avatar
    1 posts
    Member since:
    Nov 2013

    Posted 27 Nov 2013 Link to this post

    Hi ,

    I am unable to show an image when user hovers the mouse on the title bar of a webpage.
    Can you please suggest what script to use to accomplish this objective.

    Thanks
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Nov 2013 Link to this post

    Hi,

    RadWindow offers the IconUrl property that you can point to the the URL of the image you wish to use for its icon.

    In case you are looking for setting the icon the browser displays - there are various ways to add a favicon to your site: http://www.w3.org/2005/10/howto-favicon.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017