Skip to content

Commit 8a5c822

Browse files
kacheshmarovakacheshmarova
authored
Merge pull request #3745 from IgniteUI/rivanova/additional-props-sample
feat(tooltip): add placement and advanced sample
2 parents 6ee10c1 + 2a7e6b5 commit 8a5c822

File tree

10 files changed

+894
-0
lines changed

10 files changed

+894
-0
lines changed

‎live-editing/configs/TooltipConfigGenerator.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,20 @@ export class TooltipConfigGenerator implements IConfigGenerator {
2424
shortenComponentPathBy: "/interactions/tooltip/"
2525
}));
2626

27+
// Placement Tooltip Sample
28+
configs.push(new Config({
29+
component: 'TooltipPlacementComponent',
30+
appConfig: BaseAppConfig,
31+
shortenComponentPathBy: "/interactions/tooltip/"
32+
}));
33+
34+
// Advanced Tooltip Sample
35+
configs.push(new Config({
36+
component: 'TooltipAdvancedComponent',
37+
appConfig: BaseAppConfig,
38+
shortenComponentPathBy: "/interactions/tooltip/"
39+
}));
40+
2741
// Style Tooltip Sample
2842
configs.push(new Config({
2943
component: 'TooltipStyleComponent',

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export const interactionsRoutesData = {
3333
'toggle-sample-4': { displayName: 'Offset Toggle', parentName: 'Toggle' },
3434
'tooltip-simple': { displayName: 'Simple Tooltip', parentName: 'Tooltip' },
3535
'tooltip-rich': { displayName: 'Rich Tooltip', parentName: 'Tooltip' },
36+
'tooltip-placement': { displayName: 'Tooltip Placement', parentName: 'Tooltip' },
37+
'tooltip-advanced': { displayName: 'Advanced Tooltip', parentName: 'Tooltip' },
3638
'tooltip-style': { displayName: 'Tooltip Style', parentName: 'Tooltip' },
3739
'tooltip-tailwind-style': { displayName: 'Tooltip Tailwind Style', parentName: 'Tooltip' },
3840
'overlay-sample-main-1': { displayName: 'Overlay Main Sample 1', parentName: 'Overlay' },

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ import { TooltipRichComponent } from './tooltip/tooltip-rich/tooltip-rich.compon
6363
import { TooltipSimpleComponent } from './tooltip/tooltip-simple/tooltip-simple.component';
6464
import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.component';
6565
import { TooltipTailwindStyleComponent } from './tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component';
66+
import { TooltipPlacementComponent } from './tooltip/tooltip-placement/tooltip-placement.component';
67+
import { TooltipAdvancedComponent } from './tooltip/tooltip-advanced/tooltip-advanced.component';
6668

6769
export const InteractionsRoutes: Routes = [
6870
{
@@ -215,6 +217,16 @@ export const InteractionsRoutes: Routes = [
215217
data: interactionsRoutesData['tooltip-rich'],
216218
path: 'tooltip-rich'
217219
},
220+
{
221+
component: TooltipPlacementComponent,
222+
data: interactionsRoutesData['tooltip-placement'],
223+
path: 'tooltip-placement'
224+
},
225+
{
226+
component: TooltipAdvancedComponent,
227+
data: interactionsRoutesData['tooltip-advanced'],
228+
path: 'tooltip-advanced'
229+
},
218230
{
219231
component: TooltipStyleComponent,
220232
data: interactionsRoutesData['tooltip-style'],

‎src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export class IncomeTaxesItem {
2+
public constructor(init: Partial<IncomeTaxesItem>) {
3+
Object.assign(this, init);
4+
}
5+
public year: string;
6+
public revenue: number;
7+
}
8+
export class IncomeTaxes extends Array<IncomeTaxesItem> {
9+
public constructor(items: IncomeTaxesItem[] | number = -1) {
10+
if (Array.isArray(items)) {
11+
super(...items);
12+
} else {
13+
const newItems = [
14+
new IncomeTaxesItem({
15+
year: `2021`,
16+
revenue: 15
17+
}),
18+
new IncomeTaxesItem({
19+
year: `2022`,
20+
revenue: 30
21+
}),
22+
new IncomeTaxesItem({
23+
year: `2023`,
24+
revenue: 18
25+
}),
26+
new IncomeTaxesItem({
27+
year: `2024`,
28+
revenue: 30
29+
}),
30+
new IncomeTaxesItem({
31+
year: `2025`,
32+
revenue: 38
33+
})
34+
];
35+
super(...newItems.slice(0));
36+
}
37+
}
38+
}

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

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<div class="container" #outlet="overlay-outlet" igxOverlayOutlet>
2+
<igx-card class="triggerWrapper">
3+
<igx-card-header>
4+
<h3 igxCardHeaderTitle>Containing list</h3>
5+
</igx-card-header>
6+
<igx-list class="trigger" [igxTooltipTarget]="trigger1" [hideDelay]="0" [showDelay]="0">
7+
<igx-list-item>
8+
<p igxListLineTitle>Credits</p>
9+
<span igxListAction>($2.4T)</span>
10+
</igx-list-item>
11+
</igx-list>
12+
</igx-card>
13+
<div class="list" #trigger1="tooltip" igxTooltip>
14+
<igx-list>
15+
<h6>Credits</h6>
16+
<igx-list-item>
17+
<igx-icon name="dollar"></igx-icon>Amount - 1,678,345
18+
</igx-list-item>
19+
<div class="toolsWrapper">
20+
<igx-list-item [isHeader]="true">Tools</igx-list-item>
21+
<igx-list-item>
22+
<igx-icon name="filter"></igx-icon>Filter
23+
</igx-list-item>
24+
<igx-list-item>
25+
<igx-icon name="link"></igx-icon>Retail Banking
26+
</igx-list-item>
27+
<igx-list-item>
28+
<igx-icon name="info"></igx-icon>More Info
29+
</igx-list-item>
30+
</div>
31+
</igx-list>
32+
</div>
33+
<igx-card class="triggerWrapper">
34+
<igx-card-header>
35+
<h3 igxCardHeaderTitle>Containing chart</h3>
36+
</igx-card-header>
37+
<igx-list class="trigger" [igxTooltipTarget]="trigger2" [hideDelay]="0" [showDelay]="0">
38+
<igx-list-item>
39+
<p igxListLineTitle>Individual Income Taxes</p>
40+
<span>($2.4T)</span>
41+
</igx-list-item>
42+
</igx-list>
43+
</igx-card>
44+
<div class="chart" #trigger2="tooltip" igxTooltip>
45+
<h6>Individual Income Taxes</h6>
46+
<igx-category-chart
47+
[dataSource]="incomeTaxesData"
48+
[chartType]="'SplineArea'"
49+
[includedProperties]="['year', 'revenue']"
50+
[yAxisTitle]="'IFT'"
51+
[yAxisTitleLeftMargin]="10"
52+
[yAxisTitleRightMargin]="5"
53+
[yAxisLabelLeftMargin]="0"
54+
[markerTypes]="'none'"
55+
[toolTipType]="'none'"
56+
[isHorizontalZoomEnabled]="false"
57+
[isVerticalZoomEnabled]="false"
58+
>
59+
</igx-category-chart>
60+
<p class="content">
61+
In fiscal year (FY) 2024, the largest source of federal revenue was
62+
Individual Income Taxes (49.3% of total revenue). So far in fiscal
63+
year 2025, the largest source of federal revenue is Individual
64+
Income Taxes (50.6% of total revenue).
65+
</p>
66+
</div>
67+
<igx-card class="triggerWrapper">
68+
<igx-card-header>
69+
<h3 igxCardHeaderTitle>Containing badge</h3>
70+
</igx-card-header>
71+
<igx-list class="trigger" [igxTooltipTarget]="trigger3" [hideDelay]="0" [showDelay]="0">
72+
<igx-list-item>
73+
<div class="avatarWrapper" igxListThumbnail>
74+
<igx-avatar
75+
id="avatar"
76+
src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
77+
shape="circle"
78+
>
79+
</igx-avatar>
80+
<igx-badge>
81+
<igx-icon name="block"></igx-icon>
82+
</igx-badge>
83+
</div>
84+
<p igxListLineTitle>Eliza Morales</p>
85+
</igx-list-item>
86+
</igx-list>
87+
</igx-card>
88+
<div class="employee" #trigger3="tooltip" igxTooltip>
89+
<div class="avatarWrapper">
90+
<igx-avatar
91+
id="avatar"
92+
src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
93+
shape="circle"
94+
>
95+
</igx-avatar>
96+
<igx-badge>
97+
<igx-icon name="block"></igx-icon>
98+
</igx-badge>
99+
</div>
100+
<div class="textWrapper">
101+
<h6>Eliza Morales</h6>
102+
<p class="occupation">Software Engineer</p>
103+
<p class="status">In a meeting</p>
104+
<p class="availability">Available at 2:00 pm</p>
105+
</div>
106+
</div>
107+
<igx-card class="triggerWrapper">
108+
<igx-card-header>
109+
<h3 igxCardHeaderTitle>Containing icon</h3>
110+
</igx-card-header>
111+
<igx-list class="trigger" [igxTooltipTarget]="trigger4" [hideDelay]="0" [showDelay]="0" [hasArrow]="true" [igxToggleOutlet]="outlet">
112+
<igx-list-item>
113+
<div class="avatarWrapper" igxListThumbnail>
114+
<igx-avatar
115+
id="avatar"
116+
src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/5.jpg"
117+
shape="circle"
118+
>
119+
</igx-avatar>
120+
<igx-badge>
121+
<igx-icon name="block"></igx-icon>
122+
</igx-badge>
123+
</div>
124+
<p igxListLineTitle>Aron Watson</p>
125+
</igx-list-item>
126+
</igx-list>
127+
</igx-card>
128+
<div class="multiline" #trigger4="tooltip" igxTooltip>
129+
<igx-icon name="block"></igx-icon>
130+
<p>
131+
Notifications are silenced while I focus. Please reach out only for
132+
urgent matters.
133+
</p>
134+
</div>
135+
136+
<igx-card class="triggerWrapper">
137+
<igx-card-header>
138+
<h3 igxCardHeaderTitle>Containing buttons</h3>
139+
</igx-card-header>
140+
<igx-list class="trigger" [igxTooltipTarget]="trigger5" [hideDelay]="0" [showDelay]="0">
141+
<igx-list-item>
142+
<div class="headingWrapper" igxListLineTitle>
143+
<igx-icon name="btc"></igx-icon>
144+
<h6 class="heading">BTC</h6>
145+
</div>
146+
<p igxListAction class="secondary">Daily: + $45</p>
147+
</igx-list-item>
148+
</igx-list>
149+
</igx-card>
150+
<div class="btcBtn" #trigger5="tooltip" igxTooltip>
151+
<igx-card class="contentWrapper">
152+
<div class="titleWrapper">
153+
<h6>BTC</h6>
154+
<igx-icon name="btc"></igx-icon>
155+
</div>
156+
<div class="exchangeWrapper">
157+
<p class="detail">Exchange Balance</p>
158+
<p class="subtitle">USD 356.12.45</p>
159+
</div>
160+
<div class="assetsWrapper">
161+
<p class="detail">Assets Balance</p>
162+
<p class="subtitle">USD 46.28.79</p>
163+
</div>
164+
</igx-card>
165+
<div class="footerWrapper">
166+
<button igxButton="flat">Deposit</button>
167+
<button igxButton="flat">Withdraw</button>
168+
</div>
169+
</div>
170+
<igx-card class="triggerWrapper">
171+
<igx-card-header>
172+
<h3 igxCardHeaderTitle>Advanced sticky tooltip</h3>
173+
</igx-card-header>
174+
<igx-list class="trigger" [igxTooltipTarget]="trigger6" [sticky]="true" [hideDelay]="0" [showDelay]="0">
175+
<igx-list-item>
176+
<div class="headingWrapper" igxListLineTitle>
177+
<igx-icon name="btc"></igx-icon>
178+
<h6 class="heading">BTC</h6>
179+
</div>
180+
<p igxListAction class="secondary">Daily: + 2,6%</p>
181+
</igx-list-item>
182+
</igx-list>
183+
</igx-card>
184+
<div class="btc" #trigger6="tooltip" igxTooltip>
185+
<igx-card class="contentWrapper">
186+
<div class="titleWrapper">
187+
<h6>BTC</h6>
188+
<igx-icon name="btc"></igx-icon>
189+
</div>
190+
<div class="exchangeWrapper">
191+
<p class="detail">Exchange Balance</p>
192+
<p class="subtitle">USD 356.12.45</p>
193+
</div>
194+
<div class="assetsWrapper">
195+
<p class="detail">Assets Balance</p>
196+
<p class="subtitle">USD 46.28.79</p>
197+
</div>
198+
</igx-card>
199+
</div>
200+
</div>

0 commit comments

Comments
 (0)