What's New?

[CLOSED] Tool Tip Auto Hiding

  1. #1
    Nov 21, 2011, 6:20 PM

    [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: 93  Size: 64.6 KB  ID: 3478
    Last edited by Daniil; Nov 22, 2011 at 11:21 AM. Reason: [CLOSED]
  2. #2
    Nov 21, 2011, 6:54 PM
    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
    Nov 22, 2011, 8:26 AM
    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
    Nov 22, 2011, 10:16 AM
    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
    Nov 22, 2011, 10:55 AM
    You should use Fn instead of Handler.
    pnlTooltip.Listeners.Render.Fn = "onRender";
  6. #6
    Nov 22, 2011, 11:21 AM
    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 Legacy 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 Legacy Premium Help
    Replies: 13
    Last Post: Feb 15, 2010, 12:14 PM
  4. [CLOSED] [1.0] Tool
    By state in forum 1.x Legacy 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