[CLOSED] Tooltip for tabs?

  1. #1

    [CLOSED] Tooltip for tabs?

    Hi,

    Is there any way to add tooltip to tabs in TabPanel?
    Last edited by Daniil; May 17, 2011 at 2:16 PM. Reason: [CLOSED]
  2. #2
    Hi,

    A ToolTip can be attached to any Element object. When a Panel is added to a TabPanel, a .tabEl object is instantiated.

    The following sample demonstrates the full scenario of configuring a ToolTip targeted to an individual tab.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <ext:ToolTip 
                runat="server"
                Target="#{Panel1}.tabEl"
                TrackMouse="true"
                Html="Hello World" 
                />
     
            <ext:TabPanel
                ID="TabPanel1"
                runat="server" 
                Height="215" 
                Width="350">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Title="Tab 1" />
                    <ext:Panel ID="Panel2" runat="server" Title="Tab 2" />
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3

    Tooltip for Tabs?

    Hi Geoffrey,

    Thank you. I have an issue while same tooltip adding at runtime. Can you please let me know where I need to correct the code to work.

    
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            //CheckLoadingFile();
        }
        public void CheckLoadingFile()
        {        
             SortedList sLoansToOpen;
    
            if (Session["AppListToOpen"] != null)
            {
                sLoansToOpen = (SortedList)Session["AppListToOpen"];
                if (sLoansToOpen.Count > 0)
                {
                    LoadAppTabs();
                    pnlFooter.Show();
                    LoadToolTips();
                }
                else
                {
                    pnlFooter.Hide();
                }                
            }
            else
            {
                pnlFooter.Hide();
            }
              
            vpCommonPage.DoLayout();
        }
    
        public void LoadToolTips()
        {
            SortedList sAppList;
            Ext.Net.ToolTip pnlTooltip;
            if (Session["AppListToOpen"] != null)
            {
                sAppList = (SortedList)Session["AppListToOpen"];
    
                for (int i = 0; i < sAppList.Count; i++)
                {
                    //if (Ext.Net.X.GetCmp("App" + sAppList.GetKey(i).ToString()) != null)
                    //{
                        pnlTooltip = new Ext.Net.ToolTip();
                        pnlTooltip.ID = "TTApp" + sAppList.GetKey(i).ToString();
                        pnlTooltip.Target = "#{" + "App" + sAppList.GetKey(i).ToString() + "}.tabEl"; //pnlApp.ID;
                        pnlTooltip.TrackMouse = true;
                        pnlTooltip.Html = "App" + sAppList.GetKey(i).ToString();
                        //form1.Controls.Add(pnlTooltip); 
                        pnlTooltip.AddTo(form1);
                    //}
                }
            }
        }
        
        public void LoadAppTabs()
        {
            Ext.Net.Panel pnlApp;
            
            SortedList sAppList;
            
            tbApplications.RemoveAll();
            
            if (Session["AppListToOpen"] != null)
            {
                sAppList = (SortedList)Session["AppListToOpen"];
                //int j = sAppList.Count;
                for (int i = 0; i < sAppList.Count; i++)
                {
                    if (Ext.Net.X.GetCmp("App" + sAppList.GetKey(i).ToString()) == null)
                    {
                        pnlApp = new Ext.Net.Panel();
    
                        pnlApp.ID = "App" + sAppList.GetKey(i).ToString();
    
                        if (sAppList[sAppList.GetKey(i)].ToString().Trim().Length > 0)
                            pnlApp.Title = sAppList[sAppList.GetKey(i)].ToString();
                        else
                            pnlApp.Title = sAppList.GetKey(i).ToString();
    
                        pnlApp.Closable = true;
    
                        pnlApp.Listeners.Close.Handler = "CloseAppPanel('" + sAppList.GetKey(i).ToString() + "')"; 
                        pnlApp.Listeners.Activate.Handler = "OpenLoanSpecifcPages('" + sAppList.GetKey(i).ToString() + "')";
                        //pnlApp.DirectEvents.Activate.Event += pnlLoanTabs_Activate;
                        pnlApp.AddTo(tbApplications);
                    }
                    
                }
    
                tbApplications.ActiveTabIndex = sAppList.IndexOfKey(sAppList.Count);                       
            }
        }
    
        public void pnlLoanTabs_Activate(object sender, DirectEventArgs e)
        {
            
        }
    
        public void btnAdd_Click(object sender, DirectEventArgs e)
        {
            SortedList sAppList;
            int keyVal;     
            sAppList = (SortedList)Session["AppListToOpen"];
            if (sAppList == null)
               sAppList = new SortedList();
            keyVal = sAppList.Count;
            if (sAppList.Count > 0)
            {
                while (sAppList.ContainsKey(keyVal + 1))
                {
                    keyVal += 1;
                }
                sAppList.Add(keyVal + 1, "Panel " + (keyVal + 1));
            }
            else
                sAppList.Add(1, "Panel 1");
            Session["AppListToOpen"] = sAppList;
            CheckLoadingFile();
        }
    
        public void btnRemove_Click(object sender, DirectEventArgs e)
        {
            SortedList sAppList;
            sAppList = (SortedList)Session["AppListToOpen"];
            if (sAppList == null)
                sAppList = new SortedList();
            if (sAppList.Count > 0)
                    sAppList.Remove(sAppList.Count);
            Session["AppListToOpen"] = sAppList;
            CheckLoadingFile();
        }
    
        [DirectMethod]
        public void pnlLoanTabsActivate(int appid)
        {
            
        }
        
        [DirectMethod]
        public void CloseApplication(string appid)
        {
            SortedList sAppList;
    
            if (Session["AppListToOpen"] != null)
            {
                sAppList = (SortedList)Session["AppListToOpen"];
    
                if (sAppList.ContainsKey(appid))
                {
                    sAppList.Remove(appid);
                    Session["AppListToOpen"] = sAppList;
                }
            }
            CheckLoadingFile();
        }
    
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
            
            var CloseAppPanel = function (appid) {
                //alert(appid);
                Ext.net.DirectMethods.CloseApplication(appid);
            }
    
            var OpenLoanSpecifcPages = function (appid) {
                //alert("Hi " + appid)
                Ext.net.DirectMethods.pnlLoanTabsActivate(appid);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server" Layout="border" ID="vpCommonPage">
                <Items>
                    
                    <ext:Panel ID="pnlMain" runat="server" Padding="5" Region="Center" BodyStyle="background-color:#DCEAFB">
                        <Items>
                        <ext:Button ID="btnAddPanel" Text="Add Panel" runat="server">
                        <DirectEvents>
                                                            <Click OnEvent="btnAdd_Click">
                                                            </Click>
                                                        </DirectEvents>
                        </ext:Button><ext:Button ID="btnRemovePanel" Text="Remove Panel" runat="server">
                        
                        <DirectEvents>
                                                            <Click OnEvent="btnRemove_Click">
                                                            </Click>
                                                        </DirectEvents>
                                                        </ext:Button>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="pnlFooter" runat="server" Region="South" Height="45" Margins="0,0,0,0"
                        Border="false">
                        <Items>
                            <ext:TabPanel ID="tbApplications" runat="server" Height="45" AnchorHorizontal="100%"
                                Border="false">
                                <Items>
                                </Items>
                            </ext:TabPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    A ToolTip can be attached to any Element object. When a Panel is added to a TabPanel, a .tabEl object is instantiated.

    The following sample demonstrates the full scenario of configuring a ToolTip targeted to an individual tab.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <ext:ToolTip 
                runat="server"
                Target="#{Panel1}.tabEl"
                TrackMouse="true"
                Html="Hello World" 
                />
     
            <ext:TabPanel
                ID="TabPanel1"
                runat="server" 
                Height="215" 
                Width="350">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Title="Tab 1" />
                    <ext:Panel ID="Panel2" runat="server" Title="Tab 2" />
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    Hope this helps.
  4. #4
    Hi,

    This code cause the error:
    pnlTooltip.Target = "#{" + "App" + sAppList.GetKey(i).ToString() + "}.tabEl";
    because #{} can't get required control because it's absent on server side.

    You should be able to just use client id:
    pnlTooltip.Target = "App" + sAppList.GetKey(i).ToString() + ".tabEl";
    and
    set IDMode="Explicit" for the tabs.
  5. #5

    Tooltip for tabs?

    Hi daniil,

    Thank you. It is working, but is it possible to show the tooltip at top of the mouse pointer? because in my application all tabs are creating and adding to a tab panel and both tabs and tab panel are same height, and tab panel aligned at bottom of the screen, so I am unable to view the tooltip while move mouse over to tabs. Click image for larger version. 

Name:	Tooltip.PNG 
Views:	116 
Size:	14.9 KB 
ID:	2736

    Quote Originally Posted by Daniil View Post
    Hi,

    This code cause the error:
    pnlTooltip.Target = "#{" + "App" + sAppList.GetKey(i).ToString() + "}.tabEl";
    because #{} can't get required control because it's absent on server side.

    You should be able to just use client id:
    pnlTooltip.Target = "App" + sAppList.GetKey(i).ToString() + ".tabEl";
    and
    set IDMode="Explicit" for the tabs.
  6. #6
    Please set
    pnlTooltip.Anchor = "top";
  7. #7
    As well, the MouseOffset property can help with custom positioning.

    Example

    MouseOffset="0,-40"
    http://dev.sencha.com/deploy/ext-3.3...er=mouseOffset
    Geoffrey McGill
    Founder
  8. #8

    Tooltip for Tabs?

    Hi Daniil,

    Thank you once again. All issues got resolved.

    Quote Originally Posted by Daniil View Post
    Please set
    pnlTooltip.Anchor = "top";

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  2. [CLOSED] Movable Tabs
    By AABR in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Apr 30, 2013, 12:57 PM
  3. [CLOSED] LazyRender for Tabs
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 08, 2010, 1:26 AM
  4. [CLOSED] Tabs Add in c#
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 01, 2009, 12:36 PM
  5. [CLOSED] CardLayout with Tabs
    By state in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 20, 2009, 12:58 PM

Tags for this Thread

Posting Permissions