feat(tooltip): add show/hide triggers sample

live-editing/configs/TooltipConfigGenerator.ts

@@ -38,6 +38,13 @@ export class TooltipConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
+        // Tooltip Triggers Sample
+        configs.push(new Config({
+            component: 'TooltipTriggersComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/tooltip/"
+        }));
+
         // Style Tooltip Sample
         configs.push(new Config({
             component: 'TooltipStyleComponent',

src/app/interactions/interactions-routes-data.ts

@@ -35,6 +35,7 @@ export const interactionsRoutesData = {
     'tooltip-rich': { displayName: 'Rich Tooltip', parentName: 'Tooltip' },
     'tooltip-placement': { displayName: 'Tooltip Placement', parentName: 'Tooltip' },
     'tooltip-advanced': { displayName: 'Advanced Tooltip', parentName: 'Tooltip' },
+    'tooltip-triggers': { displayName: 'Tooltip Triggers', parentName: 'Tooltip' },
     'tooltip-style': { displayName: 'Tooltip Style', parentName: 'Tooltip' },
     'tooltip-tailwind-style': { displayName: 'Tooltip Tailwind Style', parentName: 'Tooltip' },
     'overlay-sample-main-1': { displayName: 'Overlay Main Sample 1', parentName: 'Overlay' },

src/app/interactions/interactions.routes.ts

@@ -65,6 +65,7 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
 import { TooltipTailwindStyleComponent } from './tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component';
 import { TooltipPlacementComponent } from './tooltip/tooltip-placement/tooltip-placement.component';
 import { TooltipAdvancedComponent } from './tooltip/tooltip-advanced/tooltip-advanced.component';
+import { TooltipTriggersComponent } from './tooltip/tooltip-triggers/tooltip-triggers.component';
 
 export const InteractionsRoutes: Routes = [
     {
@@ -227,6 +228,11 @@ export const InteractionsRoutes: Routes = [
         data: interactionsRoutesData['tooltip-advanced'],
         path: 'tooltip-advanced'
     },
+    {
+        component: TooltipTriggersComponent,
+        data: interactionsRoutesData['tooltip-triggers'],
+        path: 'tooltip-triggers'
+    },
     {
         component: TooltipStyleComponent,
         data: interactionsRoutesData['tooltip-style'],

src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.html

@@ -0,0 +1,84 @@
+<div class="triggers-container">
+    <igx-card>
+        <igx-card-header>
+            <h4 igxCardHeaderTitle>Default triggers</h4>
+        </igx-card-header>
+        <igx-card-content>
+            <p>
+                Hovering over the button below will display the tooltip using its default configuration: it appears on <strong>pointer enter</strong> and hides on <strong>pointer leave</strong> or <strong>click</strong>.
+            </p>
+            <button igxButton="outlined" [igxTooltipTarget]="triggersDefault">Hover over me</button>
+        </igx-card-content>
+    </igx-card>
+    <div #triggersDefault="tooltip" igxTooltip>
+        I am shown on pointer enter and hidden on pointer leave and/or click.
+    </div>
+
+    <igx-card>
+        <igx-card-header>
+            <h4 igxCardHeaderTitle>Focus based</h4>
+        </igx-card-header>
+        <igx-card-content>
+            <p>
+              In this instance, the tooltip is bound to show on its anchor
+              <strong>focus</strong> and will hide when its anchor is
+              <strong>blurred</strong>.
+            </p>
+            <p>Try to navigate with a Tab key to the anchor to see the effect.</p>
+            <button igxButton="outlined" [igxTooltipTarget]="triggersFocusBlur" [showDelay]="0" [hideDelay]="0" [showTriggers]="'focus'" [hideTriggers]="'blur'">Focus me</button>
+        </igx-card-content>
+    </igx-card>
+    <div #triggersFocusBlur="tooltip" igxTooltip>
+        I am shown on focus and hidden on blur.
+    </div>
+
+    <igx-card>
+        <igx-card-header>
+            <h4 igxCardHeaderTitle>Same trigger(s) for showing and hiding</h4>
+        </igx-card-header>
+        <igx-card-content>
+            <p>
+              The same trigger can be bound to both show and hide the tooltip. The
+              button below has its tooltip bound to show/hide on
+              <strong>click</strong>.
+            </p>
+            <button igxButton="outlined" [igxTooltipTarget]="triggersClick" [showDelay]="0" [hideDelay]="0" [showTriggers]="'click'" [hideTriggers]="'click'">Click</button>
+        </igx-card-content>
+    </igx-card>
+    <div #triggersClick="tooltip" igxTooltip>
+        I am shown on click and will hide on anchor click.
+    </div>
+
+    <igx-card>
+        <igx-card-header>
+            <h4 igxCardHeaderTitle>Keyboard interactions</h4>
+        </igx-card-header>
+        <igx-card-content>
+            <p>
+              Keyboard interactions are also supported. The button below has its
+              tooltip bound to show on a <strong>keypress</strong> and hide on a
+              <strong>keypress</strong> or <strong>blur</strong>.
+            </p>
+            <p>Try it out by focusing the button and pressing a key.</p>
+            <button igxButton="outlined" [igxTooltipTarget]="triggersKeypress" [showTriggers]="'keypress'" [hideTriggers]="'keypress,blur'">Press a key</button>
+        </igx-card-content>
+    </igx-card>
+    <div #triggersKeypress="tooltip" igxTooltip>
+        I am shown on a keypress and will hide on a keypress or blur.
+    </div>
+
+    <igx-card>
+        <igx-card-header>
+            <h4 igxCardHeaderTitle>Custom events</h4>
+        </igx-card-header>
+        <igx-card-content>
+            <p>
+              The tooltip supports any DOM event, including custom events. Try entering a value in the input below, then "commit" it by either <strong>blurring</strong> the input or pressing <strong>Enter</strong>.
+            </p>
+            <igc-input outlined label="Username" [igxTooltipTarget]="triggersCustom" [showTriggers]="'igcChange'"></igc-input>
+        </igx-card-content>
+    </igx-card>
+    <div #triggersCustom="tooltip" igxTooltip>
+        Value changed!
+    </div>
+</div>

src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.scss

@@ -0,0 +1,31 @@
+.triggers-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    gap: 0.6rem;
+    padding: 0.5rem 0rem 0rem 0.5rem;
+
+    & igx-card {
+        max-width: 320px;
+    }
+
+    & igx-card-header {
+        min-height: 3rem;
+    }
+
+    & igx-card-content {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        gap: 0.5rem;
+        justify-content: space-between;
+    }
+
+    & igc-input {
+        --size: 36px;
+    }
+}
+
+.igx-tooltip {
+    max-width: 200px;
+}

src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.ts

@@ -0,0 +1,30 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import {
+    IgxTooltipTargetDirective,
+    IgxTooltipDirective,
+    IgxButtonDirective,
+    IgxCardComponent,
+    IgxCardHeaderComponent,
+    IgxCardHeaderTitleDirective,
+    IgxCardContentDirective
+} from "igniteui-angular";
+import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcInputComponent);
+
+@Component({
+    selector: "app-tooltip-triggers",
+    styleUrls: ["./tooltip-triggers.component.scss"],
+    templateUrl: "./tooltip-triggers.component.html",
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [
+    IgxTooltipTargetDirective,
+    IgxTooltipDirective,
+    IgxButtonDirective,
+    IgxCardComponent,
+    IgxCardHeaderComponent,
+    IgxCardHeaderTitleDirective,
+    IgxCardContentDirective
+]
+})
+export class TooltipTriggersComponent { }