[CLOSED] How to customize a ToolTip title?

  1. #1

    [CLOSED] How to customize a ToolTip title?

    Hi,

    I'm trying to migrate a piece of 1.x code dealing with customizing the ToolTip title on the client. Please suggest the changes necessary for it to work in 2.x.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DisplayField1.Text = "Some text goes here";
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.Net 2.x</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            var showTooltip = function (tooltip) {
                tooltip.body.dom.innerHTML = '<b>' + App.DisplayField1.getValue() + '</b>';
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:DisplayField runat="server" ID="DisplayField1">
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip1" runat="server">
                            <Listeners>
                                <Show Handler="showTooltip(this);" />
                            </Listeners>
                        </ext:ToolTip>
                    </ToolTips>
                </ext:DisplayField>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Baidaly; Aug 09, 2013 at 1:14 AM. Reason: [CLOSED]
  2. #2
    Hello!

    You should use BeforeShow:

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DisplayField1.Text = "Some text goes here";
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.Net 2.x</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            var showTooltip = function (tooltip) {
                tooltip.setTitle("My Tooltip");
                tooltip.update('<b>' + App.DisplayField1.getValue() + '</b>');
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:DisplayField runat="server" ID="DisplayField1">
                    <ToolTips>
                        <ext:ToolTip ID="ToolTip1" runat="server">
                            <Listeners>
                                
                                <BeforeShow Fn="showTooltip" />
                            </Listeners>
                        </ext:ToolTip>
                    </ToolTips>
                </ext:DisplayField>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  3. #3
    Thanks Daulet, it works! Please mark this question as closed.

Similar Threads

  1. [OPEN] [#314] Tooltip is clipping its title
    By vadym.f in forum 2.x Premium Help
    Replies: 14
    Last Post: Aug 02, 2013, 5:09 PM
  2. How to customize CalendarPanel EventWindow?
    By ozlem in forum 2.x Help
    Replies: 10
    Last Post: Mar 04, 2013, 8:44 AM
  3. [CLOSED] need to put a Tooltip on panel title
    By feanor91 in forum 2.x Premium Help
    Replies: 20
    Last Post: Aug 21, 2012, 11:14 AM
  4. [CLOSED] Customize rows
    By RCM in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 09, 2012, 5:04 PM
  5. Replies: 5
    Last Post: Jun 19, 2009, 7:38 AM

Tags for this Thread

Posting Permissions