AG Grid JS - Only Trigger Tooltip On Header Icon Hover

Question

I've searched on Ag Grid and all over for a solution for this. I want to have a normal header with a tooltip icon included. When a user hovers over ONLY the icon = trigger the tooltip. Right now if you hover anywhere on the header cell it fires the tooltip. How do I lock on to what triggers the tooltip or maybe I need to change my implantation of the custom header/tooltip?

I have a JS ag grid implementation where I use a custom header with a tooltip:

{
  headerName: 'Type',
  field: 'type',
  cellClass: ...,
  cellEditor: ...,
  cellEditorPopup: ...,
  editable: ...},
  headerTooltip: 'Text to tooltip,
  singleClickEdit: ...,
  headerComponentParams: {
    template: columnToolTipIconTemplate
  },
  cellRenderer: ...
},

I have a custom header with the name of the header, icon to use for a tooltip, and normal filter/sort icons:

    export const columnToolTipIconTemplate = `<div class="ag-cell-label-container" role="presentation">
<span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
<div ref="eLabel" class="ag-header-cell-label" role="presentation">
    <span ref="eText" class="ag-header-cell-text"></span><i class="fa fa-info-circle"></i>
    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
    <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
    <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
    <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
    <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
</div>
</div>`

***** Updated to be closer with suggested solution - still looking for a native AG-Grid solution ****

Updated header - this uses the browser's treatment of title tag:

 {
  headerName: 'Type',
  field: 'type',
  cellClass: ...,
  cellEditor: ...,
  cellEditorPopup: ...,
  editable: ...,
  singleClickEdit: ...,
  headerComponentParams: {
    template: columnToolTipIconTemplate('Text or var To Tooltip')
  },
  cellRenderer: ...
},

Updated template to function:

export const columnToolTipIconTemplate = (tooltipText) => `<div class="ag-cell-label-container" role="presentation">
<span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
<div ref="eLabel" class="ag-header-cell-label" role="presentation">
    <span ref="eText" class="ag-header-cell-text"></span>
    <i class="fa fa-info-circle" title="${tooltipText}"></i> <!-- Add title attribute for the tooltip -->
    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
    <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
    <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
    <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
    <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
</div>

`;

Answer 1

This is one of the way's to do this:

1. While defining column definition, add a flag for the column you want to have a similar icon. e.g.

   colDef = [{ ..., showTooltipInfoIcon: true }]

2. Now create a custom header renderer which would include a tag based on the condition. something like this:

   init(params) { ... if(params.hasOwnProperty('showTooltipInfoIcon') && params.showTooltipInfoIcon){ // Add code to add a tooltip object to the header } }