Merge pull request #2854 from Licen-it/tooltip-data

feat(Tooltip, TooltipDefinition): expose data input to be passed as template outlet context when rendering the tooltip
carbon-design-system · Apr 11, 2024 · cb12fd9 · cb12fd9
2 parents fa59676 + b9c5fc7
commit cb12fd9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/button/icon-button.stories.ts b/src/button/icon-button.stories.ts
@@ -41,7 +41,7 @@ export default {
 				"danger--ghost"
 			],
 			control: { type: "select" },
-			name: "cdsButton"
+			name: "kind"
 		},
 		size: {
 			options: ["sm", "md", "lg", "xl", "2xl"],

diff --git a/src/tooltip/definition-tooptip.component.ts b/src/tooltip/definition-tooptip.component.ts
@@ -41,7 +41,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			role="tooltip">
 			<span class="cds--popover-content cds--definition-tooltip">
 				<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
-				<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>
+				<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
 				<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
 			</span>
 			<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
@@ -57,6 +57,10 @@ export class TooltipDefinition extends PopoverContainer {
 	 * The string or template content to be exposed by the tooltip.
 	 */
 	@Input() description: string | TemplateRef<any>;
+	/**
+	 * Optional data for templates passed as implicit context
+	 */
+	@Input() templateContext: any;
 
 	constructor(
 		protected elementRef: ElementRef,

diff --git a/src/tooltip/tooltip.component.ts b/src/tooltip/tooltip.component.ts
@@ -39,7 +39,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			<ng-container *ngIf="!disabled">
 				<span class="cds--popover-content cds--tooltip-content">
 					<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
-					<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>
+					<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
 					<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
 				</span>
 				<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
@@ -69,6 +69,10 @@ export class Tooltip extends PopoverContainer implements AfterContentChecked {
 	 * The string or template content to be exposed by the tooltip.
 	 */
 	@Input() description: string | TemplateRef<any>;
+	/**
+	 * Optional data for templates passed as implicit context
+	 */
+	@Input() templateContext: any
 
 	@ViewChild("contentWrapper") wrapper: ElementRef<HTMLSpanElement>;