bug in RadToolTipManager text direction

2 posts, 0 answers
  1. mastermehdi
    mastermehdi avatar
    39 posts
    Member since:
    Apr 2010

    Posted 13 Jul 2011 Link to this post

    Hi

    When we want set RadToolTipManager text direction to “right to left”, must use CssClass!

    Well, now look at this code:

     

    <%@ Page Language="C#" %>

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

    <head runat="server">

        <title>tooltip</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>

    <body>

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

        <h1>RadToolTipManager text direction set to default(left to right).</h1>

        <div style="margin:auto;width:50px;">

            <tlk:RadScriptManager ID="radScriptManager" runat="server" />

            <tlk:RadToolTipManager runat="server" ID="radToolTipManager"

                ManualClose="true"

                ManualCloseButtonText="ManualCloseButtonText"

                Position="MiddleLeft"

                RelativeTo="Element"

                ShowEvent="OnMouseOver"

                Width="275">

                <TargetControls>

                    <tlk:ToolTipTargetControl TargetControlID="button" />

                </TargetControls>

            </tlk:RadToolTipManager>

            <asp:Button ID="button" runat="server"

                Text="Button"

                ToolTip="آزمايشی" />

        </div>

        </form>

    </body>

    </html>

     

    first bug: CssClass is not working for RadToolTipManager, and also we can’t customize tooltips elements like font with Font Properties of RadToolTipManager!

    So I set direction property of parent div tag style to rtl(direction:rtl;), but it is not working too!

    Finally I realized that the only way to changing RadToolTipManager text direction is that I must be set direction property of form tag style or a tag that is parent of form tag!!!

    now look at finally code:

    <%@ Page Language="C#" %>

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

    <head runat="server">

        <title>tooltip</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>

    <body>

        <form id="form" runat="server" style="direction:rtl;">

        <div style="margin:auto;width:50px;">

            <tlk:RadScriptManager ID="radScriptManager" runat="server" />

            <tlk:RadToolTipManager runat="server" ID="radToolTipManager"

                ManualClose="true"

                ManualCloseButtonText="ManualCloseButtonText"

                Position="MiddleLeft"

                RelativeTo="Element"

                ShowEvent="OnMouseOver"

                Width="275">

                <TargetControls>

                    <tlk:ToolTipTargetControl TargetControlID="button" />

                </TargetControls>

            </tlk:RadToolTipManager>

            <asp:Button ID="button" runat="server"

                Text="Button"

                ToolTip="آزمايشی" />

        </div>

        </form>

    </body>

    </html>

     

    But when I  do this an other bug detected!

    Secound bug: Scrollbar is very long! Look at images

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 14 Jul 2011 Link to this post

    Hello Mehdi,

    I would recommend that you examine this article from MSDN: http://msdn.microsoft.com/en-us/library/twe16yc2(v=vs.71).aspx. It recommends to use the dir property on the html or body tag and not on the form. This will clear the issue on 2.jpg.

    You may also find useful the RTL onlinde demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/righttoleft/defaultcs.aspx. It shows that you need to set the dir property to the html or body tag in order for it to take proper effect (and to align the other elements in the page properly as well).

    Now let mi shed some light on the issues you've encountered with the code you provided:

    In the first code snippet the ToolTipManager has no way of knowing that you want the content to have the direction RTL, it is not given anywhere in the page. I do not think, though, that it is the same code you have used for generating 1.jpg, since in this screenshot the button is placed far to the right. Nevertheless, whether the button is placed far to the right or sticks to the left - only the position of the tooltip would change, not its direction. There is also no CssClass set so that one could expect any effect from it.

    Properties such as Font-Bold, Font-Size, BorderStyle, etc are only inherited and are not implemented in the ToolTIp since it cannot be clear how exactly they should affect such a complex HTML structure. To change such attributes you would need to use CSS, for example:
    div.RadToolTip_Default table.rtWrapper td.rtWrapperContent
    {
        color: Red !important;
        font-size: 40px !important;
    }
    The easiest way to get the needed selector is to use a tool like firebug and examine the output HTML.

      As for the second snippet - I advise that you set the direction property on the body or html elements, as Microsoft themselves suggest. When used like in this snippet issues may arise and this is why we have demonstrated the correct way to do it in our online demo I linked above.

    On a side note - the ManualClose property is obsolete and you should use HideEvent="ManualClose". Another important note is that the ID of the RadToolTipManager matches the name of the RadToolTipManager class. This could result in typing errors, reference errors and general loss of functionality. I would advice the you give it a different ID, for example RadToolTipManager1.

    As a reference I have attached a simple page based on your code that works correctly in terms of direction and customizes the text of the tooltip.


    Best wishes,
    Marin
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top