ui.igTreeGridTooltips

ui.igTreeGridTooltips_image

The igTreeGrid includes a Tooltips feature which allows tooltips to appear when the user hovers the mouse pointer over a grid cell. Tooltips are configurable to adjust duration and visibility options. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igTreeGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
        <!DOCTYPE html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
            <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />

            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>

            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>

            <!-- Infragistics Combined Scripts -->
            <script src="js/infragistics.core.js" type="text/javascript"></script>
            <script src="js/infragistics.lob.js" type="text/javascript"></script>

            <script type="text/javascript">
                var employees = [
                    { "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
                    { "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
                    { "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
                    { "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },

                    // Andrew Fuller's direct reports
                    { "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
                    { "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
                    { "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
                    { "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },

                    // Janet Leverling's direct reports
                    { "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
                    { "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
                    { "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },

                    // Nancy Davolio's direct reports
                    { "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
                    { "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
                    { "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },

                    // Steve Buchanan's direct reports
                    { "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
                    { "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },

                    // Lacota Mufutau's direct reports
                    { "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
                    { "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
                    { "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },

                    // Dane Rodriquez's direct reports
                    { "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
                    { "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },

                    // Bernard Jarvis' direct report
                    { "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
                ];

               $(function () {
                   $("#treegrid").igTreeGrid({
                       dataSource: employees,
                       primaryKey: "employeeId",
                       foreignKey: "supervisorId",
                       autoGenerateColumns: false,
                       columns: [
                           { headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
                           { headerText: "First", key: "firstName", width: "150px", dataType: "string" },
                           { headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
                       ],
                       features: [
                           {
                               name: "Tooltips",
                               columnSettings: [
                                   { columnKey: "employeeId", allowTooltips: false },
                                   { columnKey: "firstName", allowTooltips: true },
                                   { columnKey: "lastName", allowTooltips: true }
                               ],
                               visibility: "always",
                               showDelay: 1000,
                               hideDelay: 500
                           }
                       ]
                   });
               });
            </script>
        </head>
        <body>
            <div id="treegrid"></div>
        </body>
        </html>
    

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.ui.treegrid.js
infragistics.util.js
infragistics.ui.grid.framework.js
infragistics.ui.grid.tooltips.js

Inherits

  • columnSettings
    Inherited

    Type:
    object
    Default:
    []

    A list of custom column settings that specify custom tooltip settings for a specific column (whether tooltips are enabled / disabled).

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features: [
                    {
                        name: "Tooltips",
                        columnSettings: [
                            { columnKey: "Name", allowTooltips: true },
    						{ columnKey: "BoxArt", allowTooltips: false }
                        ]
                    }
                ]
            });
            
            //Get
            var arrayOfColumnSettings = $(".selector").igTreeGridTooltips("option", "columnSettings");
            
            //Set
            $(".selector").igTreeGridTooltips("option", "columnSettings", arrayOfColumnSettings);
          
    • allowTooltips

      Type:
      bool
      Default:
      true

      Enables / disables tooltips on the specified column. By default tooltips are displayed for each column. Note: This option is mandatory.

      Code Sample

       
                	//Initialize
      			      $(".selector").igTreeGrid({
      				      features: [
      					      {
      						      name: "Tooltips",
      						      columnSettings: [
      							      { columnKey: "Name", allowTooltips: true },
      						      ]
      					      }
      				      ]
      			      });	
      			      //Get
      				    var tooltipsSettings = $(".selector").igTreeGridTooltips("option", "columnSettings");
      				    var allowTooltipFirstColumn = tooltipsSettings[0].allowResizing;
      				
      			      //Set
      				    //get the array of column settings
      				    var tooltipsSettings = $(".selector").igTreeGridTooltips("option", "columnSettings");	
      				    //set new value for the first column
      				    tooltipsSettings[0].allowTooltips = false;
      				    $(".selector").igTreeGridTooltips("option", "columnSettings", tooltipsSettings);
                
    • columnIndex

      Type:
      number
      Default:
      -1

      Either key or index must be set in every column setting.

      Code Sample

       
                  //Initialize
      			      $(".selector").igTreeGrid({
      				      features: [
      					      {
      						      name: "Tooltips",
      						      columnSettings: [
      							      { columnIndex: 0, allowTooltips: true },
      						      ]
      					      }
      				      ]
      			      });
                
    • columnKey

      Type:
      string
      Default:
      null

      Either key or index must be set in every column setting.

      Code Sample

       
                  //Initialize
      			      $(".selector").igTreeGrid({
      				      features: [
      					      {
      						      name: "Tooltips",
      						      columnSettings: [
      							      { columnKey: "Name", allowTooltips: true },
      						      ]
      					      }
      				      ]
      			      });
                
    • maxWidth

      Type:
      number
      Default:
      null

      Specifies the maximum width (in pixels) of the tooltip when shown for the specified column. If unset the width of the column will be used instead.

      Code Sample

       
                  //Initialize
      			      $(".selector").igTreeGrid({
      				      features: [
      					      {
      						      name: "Tooltips",
      						      columnSettings: [
      							      { columnKey: "Name", maxWidth: 200 }
      						      ]
      					      }
      				      ]
      			      });
                
  • cursorLeftOffset
    Inherited

    Type:
    number
    Default:
    10

    Sets the left position of the tooltip relative to the mouse cursor.

    Code Sample

      
            //Initialize
            $(".selector").igTreeGrid({
                features: [
                    {
                        name: "Tooltips",
                        cursorLeftOffset: 30
                    }
                ]
            });
            
            //Get
            var accessibility = $(".selector").igTreeGridTooltips("option", "cursorLeftOffset");
            
            //Set
            $(".selector").igTreeGridTooltips("option", "cursorLeftOffset", 30);
          
  • cursorTopOffset
    Inherited

    Type:
    number
    Default:
    15

    Sets the top position of the tooltip relative to the mouse cursor.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features: [
                    {
                        name: "Tooltips",
                        cursorTopOffset: 50
                    }
                ]
            });
            
            //Get
            var accessibility = $(".selector").igTreeGridTooltips("option", "cursorTopOffset");
            
            //Set
            $(".selector").igTreeGridTooltips("option", "cursorTopOffset", 50);
          
  • fadeTimespan
    Inherited

    Type:
    number
    Default:
    150

    Sets the time tooltip fades in and out when showing/hiding.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features: [
                    {
                        name: "Tooltips",
                        fadeTimespan: 300
                    }
                ]
            });
            
            //Get
            var accessibility = $(".selector").igTreeGridTooltips("option", "fadeTimespan");
            
            //Set
            $(".selector").igTreeGridTooltips("option", "fadeTimespan", 300);
          
  • hideDelay
    Inherited

    Type:
    number
    Default:
    300

    Type="integer" The time in milliseconds after which tooltip hides when mouse
    cursor gets outside of the cell.

    Code Sample

           //Initialize
                $(".selector").igTreeGrid({
                    features: [
                        {
                            name: "Tooltips",
                            hideDelay: 1000
                        }
                    ]
                });
            
                //Get
                var accessibility = $(".selector").igTreeGridTooltips("option", "hideDelay");
            
                //Set
                $(".selector").igTreeGridTooltips("option", "hideDelay", 1000);
          
  • inherit
    Inherited

    Type:
    bool
    Default:
    false

    Enables/disables feature inheritance for the child layouts. NOTE: It only applies for igHierarchicalGrid.

  • showDelay
    Inherited

    Type:
    number
    Default:
    500

    The time in milliseconds after which tooltip will show when
    mouse cursor is hovered over a cell.

    Code Sample

     
              //Initialize
                $(".selector").igTreeGrid({
                    features: [
                        {
                            name: "Tooltips",
                            showDelay: 2000
                        }
                    ]
                });
            
                //Get
                var accessibility = $(".selector").igTreeGridTooltips("option", "showDelay");
            
                //Set
                $(".selector").igTreeGridTooltips("option", "showDelay", 2000);
          
  • style
    Inherited

    Type:
    enumeration
    Default:
    tooltip

    controls the tooltip's style.

    Members

    • tooltip
    • Type:string
    • The tooltip will be positioned according to the mouse cursor. Will render the tooltip content as plain text.
    • popover
    • Type:string
    • The tooltip will be positioned according to the target element with an arrow pointing the element. This style is more suitable for touch-supported environments. Will render the tooltip content as HTML.

    Code Sample

     
            //Initialize
                $(".selector").igTreeGrid({
                    features: [
                        {
                            name: "Tooltips",
                            style: "popover"
                        }
                    ]
                });
            
                //Get
                var style = $(".selector").igTreeGridTooltips("option", "style");
            
                //Set
                $(".selector").igTreeGridTooltips("option", "style", "popover");
          
  • visibility
    Inherited

    Type:
    enumeration
    Default:
    overflow

    determines the tooltip visibility option.

    Members

    • always
    • Type:string
    • tooltips always show for hovered elements.
    • never
    • Type:string
    • tooltips do not show automatically.
    • overflow
    • Type:string
    • tooltips show only when the underlying data overflows its container.

    Code Sample

     
           //Initialize
                $(".selector").igTreeGrid({
                    features: [
                        {
                            name: "Tooltips",
                            visibility: "always"
                        }
                    ]
                });
            
                //Get
                var accessibility = $(".selector").igTreeGridTooltips("option", "visibility");
            
                //Set
                $(".selector").igTreeGridTooltips("option", "visibility", "always");
          

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details
  • tooltipHidden
    Inherited

    Cancellable:
    false

    Event fired after a tooltip is hidden
    use args.owner to get a reference to the widget
    use args.tooltip to get the string displayed in the tooltip
    use args.value to get the value of the cell the tooltip was displayed for
    use args.element to get a reference to the cell the tooltip was displayed for
    use args.index to get the row index of the cell the tooltip was displayed for
    use args.columnKey to get the column key of the cell the tooltip was displayed for
    use args.columnIndex to get the column index of the cell the tooltip was displayed for.

    Code Sample

           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name: "Tooltips",
                        tooltipHidden : function(evt, args) {...}
                    }
                ]
    		});
            
            //Bind after initialization
    		 $(document).delegate(".selector", "igTreeGridtooltipstooltiphidden", function (evt, args) {
    			//return the triggered event
                evt;
                
                // get a reference to the widget			
                args.owner;
                         
                // get the string displayed in the tooltip
                args.tooltip;
    			
    			// get the value of the cell the tooltip was displayed for
    			args.value; 
    			
    			// get a reference to the cell the tooltip was displayed for
    			args.element; 
    			
    			// get the row index of the cell the tooltip was displayed for
    			args.index; 
     
    			// get the column key of the cell the tooltip was displayed for
    			args.columnKey;
     
    			// get the column index of the cell the tooltip was displayed for
    			args.columnIndex;		 
    		 } );
          
  • tooltipHiding
    Inherited

    Cancellable:
    true

    Event fired when the mouse has left an element and the tooltip is about to hide
    use args.owner to get a reference to the widget
    use args.tooltip to get the string displayed in the tooltip
    use args.value to get the value of the cell the tooltip is displayed for
    use args.element to get a reference to the cell the tooltip is displayed for
    use args.index to get the row index of the cell the tooltip is displayed for
    use args.columnKey to get the column key of the cell the tooltip is displayed for
    use args.columnIndex to get the column index of the cell the tooltip is displayed for.

    Code Sample

     
              //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name: "Tooltips",
                        tooltipHiding : function(evt, args) {...}
                    }
                ]
    		});
            
           //Bind after initialization
    		 $(document).delegate(".selector", "igtreegridtooltipstooltiphidding", function (evt, args) {
    			//return the triggered event
                evt;
                
                // get a reference to the widget			
                args.owner;
                
                // get the string displayed in the tooltip
                args.tooltip;
    			
    			// get the value of the cell the tooltip was displayed for
    			args.value; 
    			
    			// get a reference to the cell the tooltip was displayed for
    			args.element; 
    			
    			// get the row index of the cell the tooltip was displayed for
    			args.index; 
     
    			// get the column key of the cell the tooltip was displayed for
    			args.columnKey;
     
    			// get the column index of the cell the tooltip was displayed for
    			args.columnIndex;
    		 } );
          
  • tooltipShowing
    Inherited

    Cancellable:
    true

    Event fired when the mouse has hovered on an element long enough to display a tooltip
    use args.owner to get a reference to the widget
    use args.tooltip to get or set the string to be displayed
    use args.value to get the value of the cell the tooltip is displayed for
    use args.element to get a reference to the cell the tooltip is displayed for
    use args.index to get the row index of the cell the tooltip is displayed for
    use args.columnKey to get the column key of the cell the tooltip is displayed for
    use args.columnIndex to get the column index of the cell the tooltip is displayed for.

    Code Sample

            //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name: "Tooltips",
                        tooltipShowing : function(evt, args) {...}
                    }
                ]
    		});
            
           //Bind after initialization
    		 $(document).delegate(".selector", "igtreegridtooltipstooltipshowing", function (evt, args) {
    		 	//return the triggered event
                evt;
                
                // get a reference to the widget			
                args.owner;
                
                // get the string displayed in the tooltip
                args.tooltip;
    			
    			// get the value of the cell the tooltip was displayed for
    			args.value; 
    			
    			// get a reference to the cell the tooltip was displayed for
    			args.element; 
    			
    			// get the row index of the cell the tooltip was displayed for
    			args.index; 
     
    			// get the column key of the cell the tooltip was displayed for
    			args.columnKey;
     
    			// get the column index of the cell the tooltip was displayed for
    			args.columnIndex;
    		 } ); 
          
  • tooltipShown
    Inherited

    Cancellable:
    false

    Event fired after a tooltip is shown
    use args.owner to get a reference to the widget
    use args.tooltip to get the string displayed in the tooltip
    use args.value to get the value of the cell the tooltip is displayed for
    use args.element to get a reference to the cell the tooltip is displayed for
    use args.index to get the row index of the cell the tooltip is displayed for
    use args.columnKey to get the column key of the cell the tooltip is displayed for
    use args.columnIndex to get the column index of the cell the tooltip is displayed for.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name: "Tooltips",
                        tooltipShown : function(evt, args) {...}
                    }
                ]
    		});
            
            //Bind after initialization
    		 $(document).delegate(".selector", "igtreegridtooltipstooltipshown", function (evt, args) {
    		 	//return the triggered event
                evt;
                
                // get a reference to the widget			
                args.owner;
                
                // get the string displayed in the tooltip
                args.tooltip;
    			
    			// get the value of the cell the tooltip was displayed for
    			args.value; 
    			
    			// get a reference to the cell the tooltip was displayed for
    			args.element; 
    			
    			// get the row index of the cell the tooltip was displayed for
    			args.index; 
     
    			// get the column key of the cell the tooltip was displayed for
    			args.columnKey;
     
    			// get the column index of the cell the tooltip was displayed for
    			args.columnIndex;
    		 } ); 
          
  • destroy

    .igTreeGridTooltips( "destroy" );

    Code Sample

     
            $(".selector").igTreeGridTooltips("destroy"); 
          
  • id
    Inherited

    .igTreeGridTooltips( "id" );
    Return Type:
    string

    Returns the ID of the parent div element bounding the ruler and the tooltip container.

    Code Sample

     
           $(".selector").igTreeGridTooltips("id"); 
          
  • ui-iggrid-tooltip

    Classes applied to the tooltip widget.
  • ui-iggrid-tooltip-content

    Classes applied to the tooltip container.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.

#