Skip to content

Commit 2df5a39

Browse files
RivaIvanovaRivaIvanova
committed
feat(tooltip): add show/hide triggers sample
1 parent 9b1be31 commit 2df5a39

6 files changed

Lines changed: 159 additions & 0 deletions

File tree

‎live-editing/configs/TooltipConfigGenerator.ts‎

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

41+
// Tooltip Triggers Sample
42+
configs.push(new Config({
43+
component: 'TooltipTriggersComponent',
44+
appConfig: BaseAppConfig,
45+
shortenComponentPathBy: "/interactions/tooltip/"
46+
}));
47+
4148
// Style Tooltip Sample
4249
configs.push(new Config({
4350
component: 'TooltipStyleComponent',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const interactionsRoutesData = {
3535
'tooltip-rich': { displayName: 'Rich Tooltip', parentName: 'Tooltip' },
3636
'tooltip-placement': { displayName: 'Tooltip Placement', parentName: 'Tooltip' },
3737
'tooltip-advanced': { displayName: 'Advanced Tooltip', parentName: 'Tooltip' },
38+
'tooltip-triggers': { displayName: 'Tooltip Triggers', parentName: 'Tooltip' },
3839
'tooltip-style': { displayName: 'Tooltip Style', parentName: 'Tooltip' },
3940
'tooltip-tailwind-style': { displayName: 'Tooltip Tailwind Style', parentName: 'Tooltip' },
4041
'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
@@ -65,6 +65,7 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
6565
import { TooltipTailwindStyleComponent } from './tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component';
6666
import { TooltipPlacementComponent } from './tooltip/tooltip-placement/tooltip-placement.component';
6767
import { TooltipAdvancedComponent } from './tooltip/tooltip-advanced/tooltip-advanced.component';
68+
import { TooltipTriggersComponent } from './tooltip/tooltip-triggers/tooltip-triggers.component';
6869

6970
export const InteractionsRoutes: Routes = [
7071
{
@@ -227,6 +228,11 @@ export const InteractionsRoutes: Routes = [
227228
data: interactionsRoutesData['tooltip-advanced'],
228229
path: 'tooltip-advanced'
229230
},
231+
{
232+
component: TooltipTriggersComponent,
233+
data: interactionsRoutesData['tooltip-triggers'],
234+
path: 'tooltip-triggers'
235+
},
230236
{
231237
component: TooltipStyleComponent,
232238
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)