Skip to content

Commit 6a6b02a

Browse files
RivaIvanovaRivaIvanova
authored
feat(tooltip): add show/hide triggers sample (#3774)
1 parent 7fe8fea commit 6a6b02a

6 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎live-editing/configs/TooltipConfigGenerator.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@ export class TooltipConfigGenerator implements IConfigGenerator {
3939
shortenComponentPathBy: "/interactions/tooltip/"
4040
}));
4141

42+
// Tooltip Triggers Sample
43+
configs.push(new Config({
44+
component: 'TooltipTriggersComponent',
45+
appConfig: BaseAppConfig,
46+
additionalDependencies: ['igniteui-webcomponents'],
47+
shortenComponentPathBy: "/interactions/tooltip/"
48+
}));
49+
4250
// Style Tooltip Sample
4351
configs.push(new Config({
4452
component: 'TooltipStyleComponent',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const interactionsRoutesData = {
3838
'tooltip-rich': { displayName: 'Rich Tooltip', parentName: 'Tooltip' },
3939
'tooltip-placement': { displayName: 'Tooltip Placement', parentName: 'Tooltip' },
4040
'tooltip-advanced': { displayName: 'Advanced Tooltip', parentName: 'Tooltip' },
41+
'tooltip-triggers': { displayName: 'Tooltip Triggers', parentName: 'Tooltip' },
4142
'tooltip-style': { displayName: 'Tooltip Style', parentName: 'Tooltip' },
4243
'tooltip-tailwind-style': { displayName: 'Tooltip Tailwind Style', parentName: 'Tooltip' },
4344
'overlay-sample-main-1': { displayName: 'Overlay Main Sample 1', parentName: 'Overlay' },

‎src/app/interactions/interactions.routes.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
6868
import { TooltipTailwindStyleComponent } from './tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component';
6969
import { TooltipPlacementComponent } from './tooltip/tooltip-placement/tooltip-placement.component';
7070
import { TooltipAdvancedComponent } from './tooltip/tooltip-advanced/tooltip-advanced.component';
71+
import { TooltipTriggersComponent } from './tooltip/tooltip-triggers/tooltip-triggers.component';
7172

7273
export const InteractionsRoutes: Routes = [
7374
{
@@ -245,6 +246,11 @@ export const InteractionsRoutes: Routes = [
245246
data: interactionsRoutesData['tooltip-advanced'],
246247
path: 'tooltip-advanced'
247248
},
249+
{
250+
component: TooltipTriggersComponent,
251+
data: interactionsRoutesData['tooltip-triggers'],
252+
path: 'tooltip-triggers'
253+
},
248254
{
249255
component: TooltipStyleComponent,
250256
data: interactionsRoutesData['tooltip-style'],

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<div class="triggers-container">
2+
<igx-card>
3+
<igx-card-header>
4+
<h4 igxCardHeaderTitle>Default triggers</h4>
5+
</igx-card-header>
6+
<igx-card-content>
7+
<p>
8+
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>.
9+
</p>
10+
<button igxButton="outlined" [igxTooltipTarget]="triggersDefault">Hover over me</button>
11+
</igx-card-content>
12+
</igx-card>
13+
<div #triggersDefault="tooltip" igxTooltip>
14+
I am shown on pointer enter and hidden on pointer leave and/or click.
15+
</div>
16+
17+
<igx-card>
18+
<igx-card-header>
19+
<h4 igxCardHeaderTitle>Focus based</h4>
20+
</igx-card-header>
21+
<igx-card-content>
22+
<p>
23+
In this instance, the tooltip is bound to show on its anchor
24+
<strong>focus</strong> and will hide when its anchor is
25+
<strong>blurred</strong>.
26+
</p>
27+
<p>Try to navigate with a Tab key to the anchor to see the effect.</p>
28+
<button igxButton="outlined" [igxTooltipTarget]="triggersFocusBlur" [showDelay]="0" [hideDelay]="0" [showTriggers]="'focus'" [hideTriggers]="'blur'">Focus me</button>
29+
</igx-card-content>
30+
</igx-card>
31+
<div #triggersFocusBlur="tooltip" igxTooltip>
32+
I am shown on focus and hidden on blur.
33+
</div>
34+
35+
<igx-card>
36+
<igx-card-header>
37+
<h4 igxCardHeaderTitle>Same trigger(s) for showing and hiding</h4>
38+
</igx-card-header>
39+
<igx-card-content>
40+
<p>
41+
The same trigger can be bound to both show and hide the tooltip. The
42+
button below has its tooltip bound to show/hide on
43+
<strong>click</strong>.
44+
</p>
45+
<button igxButton="outlined" [igxTooltipTarget]="triggersClick" [showDelay]="0" [hideDelay]="0" [showTriggers]="'click'" [hideTriggers]="'click'">Click</button>
46+
</igx-card-content>
47+
</igx-card>
48+
<div #triggersClick="tooltip" igxTooltip>
49+
I am shown on click and will hide on anchor click.
50+
</div>
51+
52+
<igx-card>
53+
<igx-card-header>
54+
<h4 igxCardHeaderTitle>Keyboard interactions</h4>
55+
</igx-card-header>
56+
<igx-card-content>
57+
<p>
58+
Keyboard interactions are also supported. The button below has its
59+
tooltip bound to show on a <strong>keypress</strong> and hide on a
60+
<strong>keypress</strong> or <strong>blur</strong>.
61+
</p>
62+
<p>Try it out by focusing the button and pressing a key.</p>
63+
<button igxButton="outlined" [igxTooltipTarget]="triggersKeypress" [showTriggers]="'keypress'" [hideTriggers]="'keypress,blur'">Press a key</button>
64+
</igx-card-content>
65+
</igx-card>
66+
<div #triggersKeypress="tooltip" igxTooltip>
67+
I am shown on a keypress and will hide on a keypress or blur.
68+
</div>
69+
70+
<igx-card>
71+
<igx-card-header>
72+
<h4 igxCardHeaderTitle>Custom events</h4>
73+
</igx-card-header>
74+
<igx-card-content>
75+
<p>
76+
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>.
77+
</p>
78+
<igc-input outlined label="Username" [igxTooltipTarget]="triggersCustom" [showTriggers]="'igcChange'"></igc-input>
79+
</igx-card-content>
80+
</igx-card>
81+
<div #triggersCustom="tooltip" igxTooltip>
82+
Value changed!
83+
</div>
84+
</div>

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.triggers-container {
2+
display: flex;
3+
flex-wrap: wrap;
4+
align-content: space-between;
5+
gap: 0.6rem;
6+
padding: 0.5rem 0rem 0rem 0.5rem;
7+
8+
& igx-card {
9+
max-width: 320px;
10+
}
11+
12+
& igx-card-header {
13+
min-height: 3rem;
14+
}
15+
16+
& igx-card-content {
17+
display: flex;
18+
height: 100%;
19+
flex-direction: column;
20+
gap: 0.5rem;
21+
justify-content: space-between;
22+
}
23+
24+
& igc-input {
25+
--size: 36px;
26+
}
27+
}
28+
29+
.igx-tooltip {
30+
max-width: 200px;
31+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
2+
import {
3+
IgxTooltipTargetDirective,
4+
IgxTooltipDirective,
5+
IgxButtonDirective,
6+
IgxCardComponent,
7+
IgxCardHeaderComponent,
8+
IgxCardHeaderTitleDirective,
9+
IgxCardContentDirective
10+
} from "igniteui-angular";
11+
import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
12+
13+
defineComponents(IgcInputComponent);
14+
15+
@Component({
16+
selector: "app-tooltip-triggers",
17+
styleUrls: ["./tooltip-triggers.component.scss"],
18+
templateUrl: "./tooltip-triggers.component.html",
19+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
20+
imports: [
21+
IgxTooltipTargetDirective,
22+
IgxTooltipDirective,
23+
IgxButtonDirective,
24+
IgxCardComponent,
25+
IgxCardHeaderComponent,
26+
IgxCardHeaderTitleDirective,
27+
IgxCardContentDirective
28+
]
29+
})
30+
export class TooltipTriggersComponent { }

0 commit comments

Comments
 (0)