[CLOSED] Tool Tip Auto Hiding

  1. #1

    [CLOSED] Tool Tip Auto Hiding

    I was wondering if you could provide example code for the following attachmentClick image for larger version. 

Name:	tooltip example.jpg 
Views:	56 
Size:	64.6 KB 
ID:	3478
    Last edited by Daniil; Nov 22, 2011 at 11:21 AM. Reason: [CLOSED]
  2. #2
    Hi,

    We have no such example.

    But, I think, there should not be a big problem. You need to listen "mouseenter" and "mouseleave" events of the elements.
  3. #3
    Please look at the example.

    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 xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var onRender = function (tooltip) {
                tooltip.mon(tooltip.el, {
                    mouseenter : function () {
                        this.clearTimer("hide");
                    },
                    mouseleave : function () {
                        this.delayHide();
                    },
                    scope : tooltip
                });
    
                tooltip.mon(tooltip.target, {
                    mouseenter : function () {
                        this.clearTimer("hide");
                    },
                    mouseleave : function () {
                        this.delayHide();
                    },
                    scope : tooltip
                });
            };
        </script>
    
        <style type="text/css">
            #tooltip-div {
                width: 200px;
                height: 200px;
            }
            
            #myDiv {
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <div id="myDiv" class="tip-target" style="width: 185px;">Give me a mouse</div>
            
            <ext:ToolTip 
                runat="server" 
                Target="myDiv" 
                Anchor="top"
                HideDelay="2000"
                AutoHide="false">
                <Content>
                    <div id="tooltip-div">
                        I'm a ToolTip                    
                    </div>
                </Content>
                <Listeners>
                    <Render Fn="onRender" />
                </Listeners>
             </ext:ToolTip>
        </form>
    </body>
    </html>
  4. #4
    Hi Daniil,

    I have verified it is working as I need, but in my case I am creating controls at runtime and also loading form in tooltip. Can you please let me know where I am wrong in my code

    
    <%@ 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)
        {
            if (!Page.IsPostBack)
            {
                //LoadTooltipControls();
            }
        }
    
        public void ShowToolTipControls(object sender, DirectEventArgs e)
        {
            LoadTooltipControls();
        }
    
        public void LoadTooltipControls()
        {
            Ext.Net.Panel pnlApp;
            Ext.Net.ToolTip pnlTooltip;
    
            
            for (int i = 0; i < 4; i++)
            {
                if (Ext.Net.X.GetCmp("App" + i.ToString()) == null)
                {
                    pnlApp = new Ext.Net.Panel();
    
                    pnlApp.ID = "App" + i.ToString();
                    pnlApp.Title = "Tab " + i.ToString();
                    pnlApp.Closable = true;
                    pnlApp.AddTo(TabPanel1);
    
                    pnlTooltip = new Ext.Net.ToolTip();
                    pnlTooltip.ID = "TTApp" + i.ToString();
                    pnlTooltip.Target = "App" + i.ToString() + ".tabEl";
                    pnlTooltip.TrackMouse = true;
                    pnlTooltip.Anchor = "top";
                    pnlTooltip.AutoLoad.Url = "ExtTooltipForm.aspx?APPID=" + i.ToString();
                    pnlTooltip.AutoLoad.Mode = LoadMode.IFrame;
                    pnlTooltip.Width = Unit.Pixel(500);
                    pnlTooltip.Height = Unit.Pixel(200);
                    pnlTooltip.AutoHide = false;
                    pnlTooltip.Closable = true;
                    pnlTooltip.AutoRender = false;
                    pnlTooltip.HideDelay = 2000;
                    pnlTooltip.Listeners.Render.Handler = "onRender";
                    pnlTooltip.AddTo(Form1);
                }
            }
        }
        
    </script>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
        <script language="javascript" type="text/javascript">
    
            var onRender = function (tooltip) {
                tooltip.mon(tooltip.el, {
                    mouseenter: function () {
                        this.clearTimer("hide");
                    },
                    mouseleave: function () {
                        this.delayHide();
                    },
                    scope: tooltip
                });
    
                tooltip.mon(tooltip.target, {
                    mouseenter: function () {
                        this.clearTimer("hide");
                    },
                    mouseleave: function () {
                        this.delayHide();
                    },
                    scope: tooltip
                });
            };
        </script>
    
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="vpTabToolTips" runat="server">
            <Items>
                <ext:Button ID="btnLoadTabs" runat="server" Text="Load Tooltip Tabs">
                <DirectEvents>
                <Click OnEvent="ShowToolTipControls"></Click>
                </DirectEvents>
                </ext:Button>
                <ext:TabPanel ID="TabPanel1" runat="server" Height="215" Width="350">
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Please look at the example.

    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 xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var onRender = function (tooltip) {
                tooltip.mon(tooltip.el, {
                    mouseenter : function () {
                        this.clearTimer("hide");
                    },
                    mouseleave : function () {
                        this.delayHide();
                    },
                    scope : tooltip
                });
    
                tooltip.mon(tooltip.target, {
                    mouseenter : function () {
                        this.clearTimer("hide");
                    },
                    mouseleave : function () {
                        this.delayHide();
                    },
                    scope : tooltip
                });
            };
        </script>
    
        <style type="text/css">
            #tooltip-div {
                width: 200px;
                height: 200px;
            }
            
            #myDiv {
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <div id="myDiv" class="tip-target" style="width: 185px;">Give me a mouse</div>
            
            <ext:ToolTip 
                runat="server" 
                Target="myDiv" 
                Anchor="top"
                HideDelay="2000"
                AutoHide="false">
                <Content>
                    <div id="tooltip-div">
                        I'm a ToolTip                    
                    </div>
                </Content>
                <Listeners>
                    <Render Fn="onRender" />
                </Listeners>
             </ext:ToolTip>
        </form>
    </body>
    </html>
  5. #5
    You should use Fn instead of Handler.
    pnlTooltip.Listeners.Render.Fn = "onRender";
  6. #6
    Hi Daniil,

    Thank you it is working.

    Quote Originally Posted by Daniil View Post
    You should use Fn instead of Handler.
    pnlTooltip.Listeners.Render.Fn = "onRender";

Similar Threads

  1. [CLOSED] Tool tip on columnrenderer
    By SymSure in forum 1.x Premium Help
    Replies: 2
    Last Post: May 19, 2011, 8:17 AM
  2. Tool Tip Problem
    By Ganesh3.shirsath in forum 1.x Help
    Replies: 1
    Last Post: Jan 25, 2011, 2:46 PM
  3. [CLOSED] Tool Bar IE issue
    By sharif in forum 1.x Premium Help
    Replies: 13
    Last Post: Feb 15, 2010, 12:14 PM
  4. [CLOSED] [1.0] Tool
    By state in forum 1.x Premium Help
    Replies: 1
    Last Post: Jan 21, 2010, 5:21 PM
  5. Paging Tool Bar - NaN
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: May 23, 2009, 10:06 AM

Posting Permissions