I figured it out.

Your sample has 2 `ng-template` components for the column and it only needs 1. I was using the wrong one. The igxCell template is the one I was missing, and the only one necessary for making the tooltip appear properly. I was attempting to include the tooltip component in the igxCellEditor template, which doesn't work.

To answer my second question above, "Yes, you can and need to declare a separate template for the tooltip inside the column declaration."

You indicated this implementation was correct and matched your example, but it was wrong:

			
				{{ val }}
				
 {{ cell.row.data.active }} 
				
					
				
			

On the other hand, this code is a match for what you have shown in the example, and actually works for me:

			
				{{ val }}
				
 {{ cell.row.data.active }} 
			
			
				
					
				
			

Thank you for your assistance. I think we both got caught by tunnel-vision and redundancy trap, looking at this too many times without seeing what was actually different.

I am unsure what I am doing wrong. I have tried using all columns and still only get mouse-hover of the scenario name. Here is my full HTML for the scenarios list page:

	
		
		
			Scenarios
		
		
			{{ badNameWarning }}
		
		
			Cancel
			Done
		

		
			
				{{ val }}
				
 {{ cell.row.data.active }} 
				
					
				
			
		
		
			{{ cell.value }}
			
				
			
		
		
			{{ cell.value }}
			
				
			
		
		
		
		
		
		
		
		
			{{ value.replace('sys_nsgplanning', 'SYSTEM') | uppercase }}
		
		
			{{ value + 'z' | date: 'MM/dd/yy hh:mm a' }}
		
		
			{{ value.replace('sys_nsgplanning', 'SYSTEM') | uppercase }}
		
		
			{{ value + 'z' | date: 'MM/dd/yy hh:mm a' }}
		
		
			
				

					View
					Manage
					Copy
					Archive
					Activate
					Type
					Delete
				
			
		
	



	
		
Copy Scenario
	
	

		
			Name: 
			
		
		

		{{ badNameCopyWarning }}
		

			
				Type: 
				
				
					arrow_drop{{ scenType.collapsed ? '_down' : '_up' }}
				
			
			
				

					{{
						type.name
					}}
				
			
		
		

			
				Start WW: 
				
				
					arrow_drop{{ startWwCopy.collapsed ? '_down' : '_up' }}
				
			
			
				

					
						{{ ww.name }}
					
				
			
		
		

			
				Horizon: 
				
				
					arrow_drop{{ horizon.collapsed ? '_down' : '_up' }}
				
			
			
				

					{{
						ho.name
					}}
				
			
		
		
		
		Private: 

		checkAdd Scenario 
		cancelCancel
	






	
		

			
Change Scenario Type
		
	
	

		Current Scenario Type: 
		

		{{ scenarioToChangeType?.scenarioType }}
	
	

		New Scenario Type: 
		

		
			
				{{ item.name }}
			
		
		Please select the new type
	

	

		CANCEL
		Change Type
	

A scenario object looks like this:

export interface scenario {
	id: string;
	name: string;
	active: string;
	scenarioTypeId: string;
	scenarioType: string;
	startWw: string;
	startWwId: string;
	endWw: string;
	endWwId: string;
	private: boolean;
	locked: boolean;
	createdBy: string;
	createdDate: Date;
	lastModifiedBy: string;
	lastModifiedDate: any;
	facilities: string;
	families: string;
	facilityIds: string;
	familyIds: string;
	horizonId?: string;
}

Validation is run on the Name based upon the scenarioType and retroactively applied if the user changes the scenarioType within a row or the copyScenario modal. Very simply, the Name must be in a format of

`^${prefix}\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,${prefix.length === 3 ? 39 : 38}}$` (regex).

I would love to say that worked, but I also need the input in that column and putting them together isn't working for me, either by meshing the tooltip code into the existing template or by adding another template to the same column.

It's using the scenario name as the tooltip, not the column value I'm attempting to designate.

Here is current code:

		
			
				{{ val }}
				
 {{ cell.row.data.createdBy }} 
				
					
				
			
		

Even removing the input code doesn't populate the right value for the tooltip: it's still just the scenario name. I assume I'm missing something in the .ts file, but I don't see anything that seems relevant.

I'm getting the following errors on the card component html, even though I haven't yet altered your code:

Error: src/app/components/card/card.component.html:2:47 - error TS2322: Type 'string' is not assignable to type 'number'.

2  

                                                ~~~~~~~~~~~

  src/app/components/card/card.component.ts:16:15
    16  templateUrl: './card.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CardComponent.


Error: src/app/components/card/card.component.html:11:57 - error NG8004: No pipe found with name 'truncate'.

11      {{ card.content.length > counter ? (card.content | truncate) : card.content }}
                                                           ~~~~~~~~

  src/app/components/card/card.component.ts:16:15
    16  templateUrl: './card.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CardComponent.


Error: src/app/components/card/card.component.html:29:70 - error TS2322: Type 'string' is not assignable to type 'boolean'.

29   
                                                                        ~~~~~~~~~~~~~~~~~

  src/app/components/card/card.component.ts:16:15
    16  templateUrl: './card.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CardComponent.

These don't seem like valid errors to me. The only noticeable difference is in my package.json where I'm using AG/IG 13.2.1 instead of the 13.1.1 in the provided example. There are no breaking changes between versions that make sense here.

It looks like it will work. Thanks for the quick reply. I'll let you know if I have further questions on this.

To clarify, downgrading Node/NPM was half of the answer. With updating properly (some packages needed to be tweaked for versioning), I can now run locally with "ng s -o" and our build on Azure is going swimmingly. I have a coworker to thank for the tedious portion of figuring out which packages needed realignment.

Thank you for your assistance.

I am running "npm start" in my local environment and not getting anywhere with it.

I'm wondering if it's because I'm on Node 16.x and NPM 8.x. I am downgrading to the LTS for Node 14 to see if it performs better.