[CLOSED] Suppressing a custom cell tooltip when hovering over a specific element within a cell

  1. #1

    [CLOSED] Suppressing a custom cell tooltip when hovering over a specific element within a cell

    Given the following example, I want to a different tooltip to show when the user hovers over the link/icon contained within the first column. Any suggestions?

    As you can see I have tried to add a separate tooltip but it keeps getting hidden by the main one on the cell. Ideally I would like to hide the main tooltip if the mouse is over the icon/link that is embedded within the first column.

    <%@ 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)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
    
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>GridPanel Cell with ToolTip - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
            
            var renderCompany = function (value) {
                return Ext.String.format('<span class="studentName {0}">{1}<span>{2}</span>{4}</span><a href="www.ext.net?{5}" target="blank" data-qtip="I want this to show!" ><img src="/icons/information-png/ext.axd" alt="info"></img></a>', "extraStyle", value, "", "", "", "");
            };
    
    
    
    
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    store = grid.getStore(),
                    record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
                    column = view.getHeaderByCell(toolTip.triggerElement),
                    data = "<h3>Sample</h3>" + record.get(column.dataIndex) ;
                    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server"
                Title="Array Grid" 
                Width="600" 
                Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" >
                            <Renderer Fn="renderCompany" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
                </View>
            </ext:GridPanel>     
            
            <ext:ToolTip 
                runat="server" 
                Target="={#{GridPanel1}.getView().el}"
                Delegate=".x-grid-cell"
                TrackMouse="true">
                <Listeners>
                    <Show Handler="onShow(this, #{GridPanel1});" /> 
                </Listeners>
            </ext:ToolTip>     
        </form>
    </body>
    </html>
    Thanks in advance,
    Last edited by Daniil; Nov 07, 2014 at 4:07 AM. Reason: [CLOSED]
    T. Nathan Wheeler
    Desktop Programmer, I.T.
    Pensacola Christian College
  2. #2
    Hi @tnwheeler,

    Returning false from a Tooltip's BeforeShow listener prevents its appearing. There is an example of using BeforeShow.
    http://forums.ext.net/showthread.php...ll=1#post99425
  3. #3
    Daniil
    I am familiar with BeforeShow and use it already on my real page, my issue is how to detect that the cursor is over the icon/link and hide the main tooltip at that point.

    Once again, the problem is NOT hiding the tooltip for the "Company" column but how to show a different tooltip when hovering over the icon/link in the column.

    Thanks,
    T. Nathan Wheeler
    Desktop Programmer, I.T.
    Pensacola Christian College
  4. #4
    Maybe, like that.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            var renderCompany = function (value) {
                return Ext.String.format('<span class="studentName {0}">{1}<span>{2}</span>{4}</span><a class="some-class" href="www.ext.net?{5}" target="blank"><img src="/icons/information-png/ext.axd" alt="info"></img></a>', "extraStyle", value, "", "", "", "");
            };
    
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    store = grid.getStore(),
                    record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
                    column = view.getHeaderByCell(toolTip.triggerElement),
                    data = "<h3>Sample</h3>" + record.get(column.dataIndex);
    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="600"
                Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
                            <Renderer Fn="renderCompany" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
    
            <ext:ToolTip
                ID="ToolTip1"
                runat="server"
                Target="={#{GridPanel1}.getView().el}"
                Delegate=".x-grid-cell"
                TrackMouse="true">
                <Listeners>
                    <BeforeShow Handler="return !App.ToolTip2.isVisible();" />
                    <Show Handler="onShow(this, #{GridPanel1});" /> 
                </Listeners>
            </ext:ToolTip>
    
            <ext:ToolTip
                ID="ToolTip2"
                runat="server"
                Target="={#{GridPanel1}.getView().el}"
                Delegate="a.some-class"
                TrackMouse="true"
                Html="This is the link.">
                <Listeners>
                    <Show Handler="App.ToolTip1.hide();" />
                </Listeners>
            </ext:ToolTip>
        </form>
    </body>
    </html>
  5. #5
    Daniil,

    Thanks that was just what I needed and was able to implement the solution very quickly based on your example.

    Thanks again for your insight and assistance.
    T. Nathan Wheeler
    Desktop Programmer, I.T.
    Pensacola Christian College

Similar Threads

  1. [CLOSED] How to hide tooltip of specific data point in line chart?
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 4
    Last Post: Apr 18, 2014, 11:35 AM
  2. Replies: 4
    Last Post: Apr 07, 2014, 6:30 AM
  3. Replies: 3
    Last Post: Jan 29, 2014, 3:01 AM
  4. [CLOSED] Cell's tooltip
    By canbay in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 04, 2013, 3:21 PM
  5. [CLOSED] customise tooltip for a specific item in Combobox
    By Hari_CSC in forum 1.x Premium Help
    Replies: 3
    Last Post: Mar 31, 2010, 5:32 PM

Tags for this Thread

Posting Permissions