Creating an editable ToolTip

  1. #1

    Creating an editable ToolTip

    I'd like to create a control that behaves much like a ToolTip, but that contains form fields that the user can edit. (Take a look at the Telerik's ToolTip control: http://demos.telerik.com/ASPNET/Prom...DefaultCS.aspx)

    Basically, when the user hovers over a control (button, image, etc.) a tooltip or window is displayed that allows the user to input and submit some data.

    How would I go about doing this with the Coolite/ExtJS controls?
  2. #2

    RE: Creating an editable ToolTip

    Hi,

    you can male similar functionality very easy

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function regTip(target, window) {
                var targetEl = Ext.get(target);
                //set init position for preventing flickering on first showing
                var trgPos = targetEl.getBox();
                window.x = trgPos.x;
                window.y = trgPos.y + trgPos.height + 5;
                
                targetEl.on('mouseover', function() {                
                    window.show(targetEl, function() { 
                        window.alignTo(targetEl, "bl", [0, 5])
                    });
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server">
            <Listeners>
                <DocumentReady Handler="regTip('imgTarget', #{TipWindow});" />
            </Listeners>
        </ext:ScriptManager>
        
        <ext:Window ID="TipWindow" runat="server" 
            Center&#111;nload="false" 
            Title="TipWindow" 
            Show&#111;nload="false" 
            Border="false" 
            Resizable="false" 
            CloseAction="Hide" >
            <Content>
                some content
            </Content>        
        </ext:Window>
        
        <img id="imgTarget" src="grid-plugins.png" /> 
       
        </form>
    </body>
    </html>

  3. #3

    RE: Creating an editable ToolTip

    Neat trick. Works pretty well. Couple questions though:

    1. Is there a way to get the window to automatically hide if the user moves the mouse outside of the original element or the window? (e.g. the user hovers over the original element, sees the window and decides they don't want to fill in the data) Forcing the user to click the close button on the window is a bit annoying.

    2. How can I keep the window from animating when it's shown? I want it to pop up immediately instead of doing the opacity fade-in and restore animations.

    3. Is there a similar way to register regular (non-editable) tooltips with any control? I have a situation where I want to display a tooltip to a user when they hover over an image, but it looks like Tooltips can only be used with a few Coolite controls (e.g. Button, etc.)

    Thanks
  4. #4

    RE: Creating an editable ToolTip

    Hi,

    1. For automatically hide need to catch mouseout event to target and window
    2. If you don't want animation then just need to pass null target to show function of the Window
    3. You can just to add ext:qtip='My custom tip' an attribute to your image for example

    Below you can find changed example (if you can to wrap all functionality to custom control then it will be useful for the community)


    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" 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">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function regTip(target, window) {
                var targetEl = Ext.get(target);
                //set init position for preventing flickering on first showing
                var trgPos = targetEl.getBox();
                window.x = trgPos.x;
                window.y = trgPos.y + trgPos.height + 5;
    
                var dt = null;
    
                window.getEl().on('mouseover', function() {
                    if (dt != null) { dt.cancel(); dt = null; };
                });
                
                targetEl.on('mouseover', function() {
                    if (dt != null) { dt.cancel(); dt = null;};
                    window.show(null, function() {
                        window.alignTo(targetEl, "bl", [0, 5])
                    });
                });
    
                var f = function() {
                    if (dt != null) {
                        dt.cancel();
                        dt = null;
                    }
                    dt = new Ext.util.DelayedTask(function(window) { if (!window.mouseOn) { window.hide(); } }, this, [window]);
                    dt.delay(1000);
                }
    
                window.getEl().on('mouseout', f);
                targetEl.on('mouseout', f);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server">
            <Listeners>
                <DocumentReady Handler="regTip('imgTarget', #{TipWindow});" />
            </Listeners>
        </ext:ScriptManager>
        
        <ext:Window ID="TipWindow" runat="server" 
            Center&#111;nload="false"          
            Show&#111;nload="false" 
            Border="false" 
            Resizable="false" 
            Closable="false" >
            <Content>
                some content
            </Content>        
        </ext:Window>
        
        <img id="imgTarget" src="image.png" /> 
        <br />
        <img id="img1" ext:qtip="Custom Tip" src="image.png" />
       
        </form>
    </body>
    </html>

Similar Threads

  1. Creating Shortcut
    By softlabsgroup.support in forum 1.x Help
    Replies: 0
    Last Post: Jun 02, 2012, 6:30 AM
  2. Replies: 0
    Last Post: Mar 27, 2012, 10:01 AM
  3. Replies: 1
    Last Post: Nov 24, 2011, 6:13 PM
  4. Creating huge page
    By Hiverli in forum 1.x Help
    Replies: 5
    Last Post: Oct 01, 2010, 1:21 PM

Posting Permissions