[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]
  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,
  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.

Similar Threads

  1. [CLOSED] How to hide tooltip of specific data point in line chart?
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 18, 2014, 11:35 AM
  2. [CLOSED] How to draw a custom line (solid, dotted) on chart at specific position?
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 07, 2014, 6:30 AM
  3. [CLOSED] bind a gridpanel combobox cell source to specific datasource
    By AdminAISN in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 29, 2014, 3:01 AM
  4. [CLOSED] Cell's tooltip
    By canbay in forum 1.x Legacy 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 Legacy Premium Help
    Replies: 3
    Last Post: Mar 31, 2010, 5:32 PM

Tags for this Thread

Posting Permissions