From be30ff8ccf95f3fc6eb4500e3a6af7ae57c043bd Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Mon, 19 Oct 2026 11:26:57 +0300 Subject: [PATCH 1/3] fix(tooltip): update samples content --- .../configs/TooltipConfigGenerator.ts | 35 +- src/app/app.routes.server.ts | 18 + .../interactions/interactions-routes-data.ts | 14 +- src/app/interactions/interactions.routes.ts | 56 +-- .../tooltip-advanced.component.html | 200 --------- .../tooltip-advanced.component.scss | 408 ------------------ .../tooltip-advanced.component.ts | 63 --- .../tooltip-arrow-position.component.html | 19 + .../tooltip-arrow-position.component.scss | 89 ++++ .../tooltip-arrow-position.component.ts | 61 +++ .../IncomeTaxes.ts | 0 .../tooltip-custom.component.html | 69 +++ .../tooltip-custom.component.scss | 135 ++++++ .../tooltip-custom.component.ts | 45 ++ .../tooltip-overview.component.html | 21 + .../tooltip-overview.component.scss | 28 ++ .../tooltip-overview.component.ts | 64 +++ .../tooltip-placement.component.html | 15 - .../tooltip-placement.component.scss | 14 - .../tooltip-placement.component.ts | 110 ----- .../tooltip-position.component.html | 10 + .../tooltip-position.component.scss | 28 ++ .../tooltip-position.component.ts | 29 ++ .../tooltip-rich/tooltip-rich.component.html | 14 - .../tooltip-rich/tooltip-rich.component.scss | 33 -- .../tooltip-rich/tooltip-rich.component.ts | 12 - .../tooltip-simple.component.html | 11 - .../tooltip-simple.component.scss | 0 .../tooltip-simple.component.ts | 11 - .../tooltip-style.component.html | 10 - .../tooltip-style.component.scss | 11 - .../tooltip-style/tooltip-style.component.ts | 12 - .../tooltip-styling.component.html | 20 + .../tooltip-styling.component.scss | 65 +++ .../tooltip-styling.component.ts | 41 ++ .../tooltip-tailwind-style.component.html | 10 - .../tooltip-tailwind-style.component.scss | 0 .../tooltip-tailwind-style.component.ts | 12 - .../tooltip-tailwind-styling.component.html | 77 ++++ .../tooltip-tailwind-styling.component.scss | 12 + .../tooltip-tailwind-styling.component.ts | 61 +++ .../tooltip-triggers.component.html | 84 ---- .../tooltip-triggers.component.scss | 31 -- .../tooltip-triggers.component.ts | 30 -- .../tooltip-variants.component.html | 10 + .../tooltip-variants.component.scss | 24 ++ .../tooltip-variants.component.ts | 25 ++ 47 files changed, 1007 insertions(+), 1140 deletions(-) delete mode 100644 src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html delete mode 100644 src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss delete mode 100644 src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts create mode 100644 src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.html create mode 100644 src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.scss create mode 100644 src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.ts rename src/app/interactions/tooltip/{tooltip-advanced => tooltip-custom}/IncomeTaxes.ts (100%) create mode 100644 src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.html create mode 100644 src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.scss create mode 100644 src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.ts create mode 100644 src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.html create mode 100644 src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.scss create mode 100644 src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.ts delete mode 100644 src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html delete mode 100644 src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss delete mode 100644 src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts create mode 100644 src/app/interactions/tooltip/tooltip-position/tooltip-position.component.html create mode 100644 src/app/interactions/tooltip/tooltip-position/tooltip-position.component.scss create mode 100644 src/app/interactions/tooltip/tooltip-position/tooltip-position.component.ts delete mode 100644 src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.html delete mode 100644 src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.scss delete mode 100644 src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.ts delete mode 100644 src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.html delete mode 100644 src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.scss delete mode 100644 src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.ts delete mode 100644 src/app/interactions/tooltip/tooltip-style/tooltip-style.component.html delete mode 100644 src/app/interactions/tooltip/tooltip-style/tooltip-style.component.scss delete mode 100644 src/app/interactions/tooltip/tooltip-style/tooltip-style.component.ts create mode 100644 src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html create mode 100644 src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.scss create mode 100644 src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.ts delete mode 100644 src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html delete mode 100644 src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.scss delete mode 100644 src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts create mode 100644 src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.html create mode 100644 src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.scss create mode 100644 src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.ts delete mode 100644 src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.html delete mode 100644 src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.scss delete mode 100644 src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.ts create mode 100644 src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.html create mode 100644 src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.scss create mode 100644 src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.ts diff --git a/live-editing/configs/TooltipConfigGenerator.ts b/live-editing/configs/TooltipConfigGenerator.ts index 3d88021caa..db7b1ea24f 100644 --- a/live-editing/configs/TooltipConfigGenerator.ts +++ b/live-editing/configs/TooltipConfigGenerator.ts @@ -9,48 +9,55 @@ export class TooltipConfigGenerator implements IConfigGenerator { public generateConfigs(): Config[] { const configs = new Array(); - // Simple Tooltip Sample + // tooltip overview configs.push(new Config({ - component: 'TooltipSimpleComponent', + component: 'TooltipOverviewComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/interactions/tooltip/" })); - // Rich Tooltip Sample + // tooltip variants configs.push(new Config({ - component: 'TooltipRichComponent', + component: 'TooltipVariantsComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/interactions/tooltip/" })); - // Placement Tooltip Sample + // tooltip position configs.push(new Config({ - component: 'TooltipPlacementComponent', + component: 'TooltipPositionComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/interactions/tooltip/" })); - // Advanced Tooltip Sample + // tooltip arrow position configs.push(new Config({ - component: 'TooltipAdvancedComponent', + component: 'TooltipArrowPositionComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/interactions/tooltip/" + })); + + // tooltip custom + configs.push(new Config({ + component: 'TooltipCustomComponent', appConfig: BaseAppConfig, additionalDependencies: ['igniteui-angular-charts', 'igniteui-angular-core'], - additionalFiles: ['/src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts'], + additionalFiles: ['/src/app/interactions/tooltip/tooltip-custom/IncomeTaxes.ts'], shortenComponentPathBy: "/interactions/tooltip/" })); - // Tooltip Triggers Sample + // tooltip styling configs.push(new Config({ - component: 'TooltipTriggersComponent', + component: 'TooltipStylingComponent', appConfig: BaseAppConfig, - additionalDependencies: ['igniteui-webcomponents'], shortenComponentPathBy: "/interactions/tooltip/" })); - // Style Tooltip Sample + // tooltip tailwind styling configs.push(new Config({ - component: 'TooltipStyleComponent', + component: 'TooltipTailwindStylingComponent', appConfig: BaseAppConfig, + additionalDependencies: ['igniteui-angular-charts', 'igniteui-angular-core'], shortenComponentPathBy: "/interactions/tooltip/" })); diff --git a/src/app/app.routes.server.ts b/src/app/app.routes.server.ts index 2960e62832..e847f1a0d9 100644 --- a/src/app/app.routes.server.ts +++ b/src/app/app.routes.server.ts @@ -25,6 +25,24 @@ export const serverRoutes: ServerRoute[] = [ path: 'samples/data-entries/**', renderMode: RenderMode.Client // TODO: Fails with Prerender }, + { + // Charts access `window` in their constructors, which fails under + // Prerender. Must precede the interactions/** globs. + path: 'interactions/tooltip-custom', + renderMode: RenderMode.Client + }, + { + path: 'samples/interactions/tooltip-custom', + renderMode: RenderMode.Client + }, + { + path: 'interactions/tooltip-tailwind-styling', + renderMode: RenderMode.Client + }, + { + path: 'samples/interactions/tooltip-tailwind-styling', + renderMode: RenderMode.Client + }, { path: 'interactions/**', renderMode: RenderMode.Prerender diff --git a/src/app/interactions/interactions-routes-data.ts b/src/app/interactions/interactions-routes-data.ts index 1f81a4f4d8..5f0f24bbb9 100644 --- a/src/app/interactions/interactions-routes-data.ts +++ b/src/app/interactions/interactions-routes-data.ts @@ -34,13 +34,13 @@ export const interactionsRoutesData = { 'toggle-sample-2': { displayName: 'Automatic Toggle Actions', parentName: 'Toggle' }, 'toggle-sample-3': { displayName: 'Toggle Service Provider', parentName: 'Toggle' }, 'toggle-sample-4': { displayName: 'Offset Toggle', parentName: 'Toggle' }, - 'tooltip-simple': { displayName: 'Simple Tooltip', parentName: 'Tooltip' }, - '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' }, + 'tooltip-overview': { displayName: 'Tooltip Overview', parentName: 'Tooltip' }, + 'tooltip-variants': { displayName: 'Tooltip Variants', parentName: 'Tooltip' }, + 'tooltip-position': { displayName: 'Tooltip Position', parentName: 'Tooltip' }, + 'tooltip-arrow-position': { displayName: 'Tooltip Arrow Position', parentName: 'Tooltip' }, + 'tooltip-custom': { displayName: 'Tooltip Custom', parentName: 'Tooltip' }, + 'tooltip-styling': { displayName: 'Tooltip Styling', parentName: 'Tooltip' }, + 'tooltip-tailwind-styling': { displayName: 'Tooltip Tailwind Styling', parentName: 'Tooltip' }, 'overlay-sample-main-1': { displayName: 'Overlay Main Sample 1', parentName: 'Overlay' }, 'overlay-sample-main-2': { displayName: 'Overlay Main Sample 2', parentName: 'Overlay' }, 'overlay-sample-main-3': { displayName: 'Overlay Main Sample 3', parentName: 'Overlay' }, diff --git a/src/app/interactions/interactions.routes.ts b/src/app/interactions/interactions.routes.ts index 5918ee1fae..a6414e32d4 100644 --- a/src/app/interactions/interactions.routes.ts +++ b/src/app/interactions/interactions.routes.ts @@ -62,13 +62,13 @@ import { ToggleSample2Component } from './toggle/toggle-sample-2/toggle-sample-2 import { ToggleSample3Component } from './toggle/toggle-sample-3/toggle-sample-3.component'; import { ToggleSample4Component } from './toggle/toggle-sample-4/toggle-sample-4.component'; import { ToggleComponent } from './toggle/toggle.component'; -import { TooltipRichComponent } from './tooltip/tooltip-rich/tooltip-rich.component'; -import { TooltipSimpleComponent } from './tooltip/tooltip-simple/tooltip-simple.component'; -import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.component'; -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'; +import { TooltipOverviewComponent } from './tooltip/tooltip-overview/tooltip-overview.component'; +import { TooltipVariantsComponent } from './tooltip/tooltip-variants/tooltip-variants.component'; +import { TooltipPositionComponent } from './tooltip/tooltip-position/tooltip-position.component'; +import { TooltipArrowPositionComponent } from './tooltip/tooltip-arrow-position/tooltip-arrow-position.component'; +import { TooltipCustomComponent } from './tooltip/tooltip-custom/tooltip-custom.component'; +import { TooltipStylingComponent } from './tooltip/tooltip-styling/tooltip-styling.component'; +import { TooltipTailwindStylingComponent } from './tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component'; export const InteractionsRoutes: Routes = [ { @@ -227,39 +227,39 @@ export const InteractionsRoutes: Routes = [ path: 'toggle-sample-4' }, { - component: TooltipSimpleComponent, - data: interactionsRoutesData['tooltip-simple'], - path: 'tooltip-simple' + component: TooltipOverviewComponent, + data: interactionsRoutesData['tooltip-overview'], + path: 'tooltip-overview' }, { - component: TooltipRichComponent, - data: interactionsRoutesData['tooltip-rich'], - path: 'tooltip-rich' + component: TooltipVariantsComponent, + data: interactionsRoutesData['tooltip-variants'], + path: 'tooltip-variants' }, { - component: TooltipPlacementComponent, - data: interactionsRoutesData['tooltip-placement'], - path: 'tooltip-placement' + component: TooltipPositionComponent, + data: interactionsRoutesData['tooltip-position'], + path: 'tooltip-position' }, { - component: TooltipAdvancedComponent, - data: interactionsRoutesData['tooltip-advanced'], - path: 'tooltip-advanced' + component: TooltipArrowPositionComponent, + data: interactionsRoutesData['tooltip-arrow-position'], + path: 'tooltip-arrow-position' }, { - component: TooltipTriggersComponent, - data: interactionsRoutesData['tooltip-triggers'], - path: 'tooltip-triggers' + component: TooltipCustomComponent, + data: interactionsRoutesData['tooltip-custom'], + path: 'tooltip-custom' }, { - component: TooltipStyleComponent, - data: interactionsRoutesData['tooltip-style'], - path: 'tooltip-style' + component: TooltipStylingComponent, + data: interactionsRoutesData['tooltip-styling'], + path: 'tooltip-styling' }, { - component: TooltipTailwindStyleComponent, - data: interactionsRoutesData['tooltip-tailwind-style'], - path: 'tooltip-tailwind-style' + component: TooltipTailwindStylingComponent, + data: interactionsRoutesData['tooltip-tailwind-styling'], + path: 'tooltip-tailwind-styling' }, { component: OverlaySampleMain1Component, diff --git a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html deleted file mode 100644 index 920d34976c..0000000000 --- a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.html +++ /dev/null @@ -1,200 +0,0 @@ -
- - -

Containing list

- - - -

Credits

- ($2.4T) - - - -
- -
Credits
- - Amount - 1,678,345 - -
- Tools - - Filter - - - Retail Banking - - - More Info - -
- -
- - -

Containing chart

- - - -

Individual Income Taxes

- ($2.4T) - - - -
-
Individual Income Taxes
- - -

- In fiscal year (FY) 2024, the largest source of federal revenue was - Individual Income Taxes (49.3% of total revenue). So far in fiscal - year 2025, the largest source of federal revenue is Individual - Income Taxes (50.6% of total revenue). -

-
- - -

Containing badge

- - - -
- - - - - -
-

Eliza Morales

- - - -
-
- - - - - -
-
-
Eliza Morales
-

Software Engineer

-

In a meeting

-

Available at 2:00 pm

-
-
- - -

Containing icon

- - - -
- - - - - -
-

Aron Watson

- - - -
- -

- Notifications are silenced while I focus. Please reach out only for - urgent matters. -

-
- - - -

Containing buttons

- - - -
- -
BTC
-
-

Daily: + $45

- - - -
- -
-
BTC
- -
-
-

Exchange Balance

-

USD 356.12.45

-
-
-

Assets Balance

-

USD 46.28.79

-
- -
- - -
-
- - -

Advanced sticky tooltip

- - - -
- -
BTC
-
-

Daily: + 2,6%

- - - -
- -
-
BTC
- -
-
-

Exchange Balance

-

USD 356.12.45

-
-
-

Assets Balance

-

USD 46.28.79

-
- -
-
diff --git a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss deleted file mode 100644 index d0e91354d6..0000000000 --- a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.scss +++ /dev/null @@ -1,408 +0,0 @@ -.container { - display: flex; - flex-wrap: wrap; - max-height: max-content; - max-width: 680px; - gap: 1rem; - padding: 1rem; -} - -p { - margin: unset; -} - -.igx-tooltip { - color: var(--ig-primary-300-contrast); - background-color: var(--ig-surface-50); - border: 1px solid var(--ig-gray-300); - box-shadow: var(--ig-elevation-1); - max-width: unset; -} - -.triggerWrapper { - border: 1px solid var(--ig-gray-200); - border-radius: 0.25rem; - background-color: #f5f5f5; - - h3 { - color: #000 - } - - .trigger { - border: 1px solid var(--ig-gray-300); - width: 280px; - height: max-content; - margin: 0px 1rem 1rem; - - span { - display: block; - font-size: 0.8125rem; - line-height: 1.375rem; - letter-spacing: 0.3px; - color: var(--ig-gray-600); - text-decoration: underline; - } - - .headingWrapper { - display: flex; - align-items: center; - - igx-icon { - --size: 1.25rem - } - - h6 { - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - margin: unset; - padding-left: 0.5rem; - color: var(--ig-gray-900); - } - } - - .secondary { - color: var(--ig-success-500); - font-size: 0.875rem; - line-height: 1.25rem; - letter-spacing: 0.25px; - } - - igx-avatar { - --size: 2.5rem; - } - } -} - -.trigger:nth-of-type(6) { - cursor: pointer; -} - -.trigger:nth-of-type(n+5) { - margin-left: 1.5rem; -} - -.list.igx-tooltip { - padding: unset; -} - -.list { - - igx-list { - width: 300px; - padding: 1rem; - gap: 1rem; - letter-spacing: 0.15px; - border-radius: 0.25rem; - - h6 { - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - line-height: var(--ig-h6-line-height); - margin: unset; - } - - igx-list-item { - - &:not(.igx-list__header) { - --item-text-color: var(--ig-gray-900); - cursor: pointer; - font-size: 1rem; - line-height: 1.5rem; - font-weight: 400; - letter-spacing: 0.15px; - } - } - - igx-icon { - --size: 0.938rem; - --ig-icon-color: var(--ig-gray-700); - display: inline-block; - vertical-align: middle; - margin-right: 1rem; - } - } -} - -.chart.igx-tooltip { - border-radius: 0.5rem; - padding: 1rem; - gap: 1rem; - display: flex; - flex-direction: column; -} - -.chart { - - h6 { - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - letter-spacing: var(--ig-h6-letter-spacing); - line-height: var(--ig-h6-line-height); - margin: unset; - } - - igx-category-chart { - width: 317px; - height: 178px; - border: 1px solid #E0E0E0; - border-radius: 0.375rem; - } - - .content { - font-size: 0.813rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.3px; - color: var(--ig-gray-700); - width: 317px; - } - - p { - margin: unset; - } -} - -.employee.igx-tooltip { - border-radius: 0.5rem; - padding: 1rem; - gap: 1rem; -} - -.employee { - - igx-avatar { - --size: 5.5rem - } - - .textWrapper { - width: 159px; - - p { - margin: unset; - } - - h6 { - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - margin: unset; - } - - p:not(.title) { - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; - letter-spacing: 0.25px; - color: var(--ig-gray-700); - } - } -} - -.avatarWrapper { - line-height: 0; - position: relative; - - igx-badge { - --background-color: var(--ig-error-500); - --_badge-size: 1.25rem; - box-shadow: var(--ig-elevation-1); - position: absolute; - bottom: -3px; - right: -3px; - } -} - -.multiline.igx-tooltip { - border-radius: 0.125rem; - gap: 0.5rem; - background-color: var(--ig-error-50); - border: unset; - padding: 0.188rem 0.5rem; -} - -:host ::ng-deep { - .multiline .igx-tooltip--bottom { - border-bottom-color: var(--ig-error-50); - } -} - -.multiline { - igx-icon { - color: var(--ig-error-500); - --size: 0.938rem; - width: 1.125rem; - height: 1.125rem; - } - - p { - font-size: 0.625rem; - width: 158px; - line-height: 1rem; - letter-spacing: 0.33px; - margin: unset; - } -} - -.btcBtn.igx-tooltip { - border-radius: 0.25rem; - padding: 1rem 1rem 0.5rem 1rem; - gap: 0.5rem; - display: flex; - flex-direction: column; -} - -.btcBtn { - - igx-card { - background-color: var(--ig-gray-50); - padding: 0.5rem; - border-radius: 0.125rem; - letter-spacing: 0.15px; - width: 268px; - border: none; - - .titleWrapper { - display: flex; - width: 4.25rem; - justify-content: space-between; - - h6 { - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - line-height: var(--ig-h6-line-height); - margin: unset; - } - - igx-icon { - --size: 1.25rem; - width: 1.5rem; - } - } - - .detail { - font-size: 0.75rem; - font-weight: 600; - line-height: 1rem; - margin-bottom: unset; - } - - .subtitle { - font-size: 1rem; - line-height: 1.5rem; - margin-top: unset; - margin-bottom: 1rem; - color: var(--ig-gray-900); - } - - .exchangeWrapper { - - .detail { - color: var(--ig-secondary-300); - margin: 1rem 0 0.125rem 0; - } - } - - .assetsWrapper { - - .detail { - color: var(--ig-primary-300); - margin: 0 0 0.125rem 0; - } - - .subtitle { - margin-bottom: unset; - } - } - } - - .footerWrapper { - width: 100%; - gap: 0.313rem; - display: flex; - justify-content: flex-end; - - igx-button { - font-size: 0.875rem; - line-height: 1rem; - letter-spacing: 0.75px; - } - } -} - -.btc.igx-tooltip { - border-radius: 0.25rem; - padding: 1rem; - gap: 0.5rem; - display: flex; - justify-content: space-between; - width: 280px; - --ig-icon-color: var(--ig-gray-700); -} - -.btc { - - igx-card { - padding: 0.5rem; - letter-spacing: 0.15px; - border: none; - - .titleWrapper { - display: flex; - width: 4.25rem; - justify-content: space-between; - - h6 { - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - line-height: var(--ig-h6-line-height); - margin: unset; - } - - igx-icon { - --size: 1.25rem; - width: 1.5rem; - } - } - - .detail { - font-size: 0.75rem; - font-weight: 600; - line-height: 1rem; - margin-bottom: unset; - } - - .subtitle { - font-size: 1rem; - line-height: 1.5rem; - margin-top: unset; - color: var(--ig-gray-900); - } - - .exchangeWrapper { - - .detail { - color: var(--ig-secondary-300); - margin: 0.5rem 0 0.125rem 0; - } - - .subtitle { - margin-bottom: 0.5rem; - } - } - - .assetsWrapper { - - .detail { - color: var(--ig-primary-300); - margin: 0 0 0.125rem 0; - } - - .subtitle { - margin-bottom: unset; - } - } - } -} diff --git a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts b/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts deleted file mode 100644 index 8f8efcdf8a..0000000000 --- a/src/app/interactions/tooltip/tooltip-advanced/tooltip-advanced.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, inject } from "@angular/core"; -import { IgxButtonDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; -import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; -import { IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective } from 'igniteui-angular/card'; -import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; -import { IgxCategoryChartModule } from "igniteui-angular-charts"; -import { IncomeTaxes } from "./IncomeTaxes"; - -@Component({ - selector: "app-tooltip-advanced", - styleUrls: ["./tooltip-advanced.component.scss"], - templateUrl: "./tooltip-advanced.component.html", - imports: [ - IgxOverlayOutletDirective, - IgxTooltipTargetDirective, - IgxTooltipDirective, - IgxListComponent, - IgxListItemComponent, - IgxListActionDirective, - IgxListLineTitleDirective, - IgxListThumbnailDirective, - IgxAvatarComponent, - IgxIconComponent, - IgxBadgeComponent, - IgxButtonDirective, - IgxCardComponent, - IgxCardHeaderComponent, - IgxCardHeaderTitleDirective, - IgxCategoryChartModule - ] -}) -export class TooltipAdvancedComponent { - private iconService = inject(IgxIconService); - - private dollarIcon = ''; - private filterIcon = ''; - private linkIcon = ''; - private infoIcon = ''; - private blockIcon = ''; - private btcIcon = ''; - - private incomeTaxes: IncomeTaxes = null; - - constructor() { - this.iconService.addSvgIconFromText('dollar', this.dollarIcon); - this.iconService.addSvgIconFromText('filter', this.filterIcon); - this.iconService.addSvgIconFromText('link', this.linkIcon); - this.iconService.addSvgIconFromText('info', this.infoIcon); - this.iconService.addSvgIconFromText('block', this.blockIcon); - this.iconService.addSvgIconFromText('btc', this.btcIcon); - } - - public get incomeTaxesData(): IncomeTaxes { - if (this.incomeTaxes === null) - { - this.incomeTaxes = new IncomeTaxes(); - } - return this.incomeTaxes; - } -} diff --git a/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.html b/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.html new file mode 100644 index 0000000000..f07d36a75c --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.html @@ -0,0 +1,19 @@ +
+ @for (placement of placements; track placement.value) { + @let side = placement.value.split('-')[0]; + @let alignment = placement.value.split('-')[1] ?? 'center'; +
+ {{ placement.label }} +
+ + +
+
+ } +
diff --git a/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.scss b/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.scss new file mode 100644 index 0000000000..54d5a3fda6 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.scss @@ -0,0 +1,89 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + height: 100%; + padding: 1rem; +} + +.placements { + display: grid; + grid-template-columns: repeat(3, 12.75rem); + column-gap: 3.75rem; + row-gap: 1.5rem; +} + +.placement { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.placement-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} + +.placement-area { + position: relative; + width: 12.5rem; + height: 2.75rem; +} + +.placement-area.left, +.placement-area.right { + width: 12.75rem; + height: 2.5rem; +} + +::ng-deep .igx-tooltip { + pointer-events: none; +} + +.anchor { + position: absolute; + width: 2.5rem; + height: 1px; + pointer-events: none; +} + +.top .anchor { + top: calc(100% + 0.125rem); +} + +.bottom .anchor { + bottom: calc(100% + 0.125rem); +} + +.top .anchor.start, +.bottom .anchor.start { + left: 0; +} + +.top .anchor.center, +.bottom .anchor.center { + left: calc(50% - 1.25rem); +} + +.top .anchor.end, +.bottom .anchor.end { + right: 0; +} + +.left .anchor, +.right .anchor { + top: 0; + width: 1px; + height: 2.5rem; +} + +.left .anchor { + left: calc(100% + 0.125rem); +} + +.right .anchor { + right: calc(100% + 0.125rem); +} diff --git a/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.ts b/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.ts new file mode 100644 index 0000000000..b33b7caeb4 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-arrow-position/tooltip-arrow-position.component.ts @@ -0,0 +1,61 @@ +import { afterNextRender, Component, QueryList, ViewChildren } from '@angular/core'; +import { HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxTooltipTargetDirective } from 'igniteui-angular/directives'; + +type TooltipPlacement = + | 'top' | 'top-start' | 'top-end' + | 'left' | 'left-start' | 'left-end' + | 'right' | 'right-start' | 'right-end' + | 'bottom' | 'bottom-start' | 'bottom-end'; + +const { Left, Center, Right } = HorizontalAlignment; +const { Top, Middle, Bottom } = VerticalAlignment; + +@Component({ + selector: 'app-tooltip-arrow-position', + styleUrls: ['./tooltip-arrow-position.component.scss'], + templateUrl: './tooltip-arrow-position.component.html', + imports: [IgxTooltipTargetDirective] +}) +export class TooltipArrowPositionComponent { + @ViewChildren(IgxTooltipTargetDirective) + public targets: QueryList; + + public placements: { label: string; value: TooltipPlacement }[] = [ + { label: 'Arrow Top', value: 'top' }, + { label: 'Arrow Top Start', value: 'top-start' }, + { label: 'Arrow Top End', value: 'top-end' }, + { label: 'Arrow Left', value: 'left' }, + { label: 'Arrow Left Start', value: 'left-start' }, + { label: 'Arrow Left End', value: 'left-end' }, + { label: 'Arrow Right', value: 'right' }, + { label: 'Arrow Right Start', value: 'right-start' }, + { label: 'Arrow Right End', value: 'right-end' }, + { label: 'Arrow Bottom', value: 'bottom' }, + { label: 'Arrow Bottom Start', value: 'bottom-start' }, + { label: 'Arrow Bottom End', value: 'bottom-end' } + ]; + + public positions: Record = { + 'top': { horizontalDirection: Center, horizontalStartPoint: Center, verticalDirection: Top, verticalStartPoint: Top }, + 'top-start': { horizontalDirection: Right, horizontalStartPoint: Left, verticalDirection: Top, verticalStartPoint: Top }, + 'top-end': { horizontalDirection: Left, horizontalStartPoint: Right, verticalDirection: Top, verticalStartPoint: Top }, + 'left': { horizontalDirection: Left, horizontalStartPoint: Left, verticalDirection: Middle, verticalStartPoint: Middle }, + 'left-start': { horizontalDirection: Left, horizontalStartPoint: Left, verticalDirection: Bottom, verticalStartPoint: Top }, + 'left-end': { horizontalDirection: Left, horizontalStartPoint: Left, verticalDirection: Top, verticalStartPoint: Bottom }, + 'right': { horizontalDirection: Right, horizontalStartPoint: Right, verticalDirection: Middle, verticalStartPoint: Middle }, + 'right-start': { horizontalDirection: Right, horizontalStartPoint: Right, verticalDirection: Bottom, verticalStartPoint: Top }, + 'right-end': { horizontalDirection: Right, horizontalStartPoint: Right, verticalDirection: Top, verticalStartPoint: Bottom }, + 'bottom': { horizontalDirection: Center, horizontalStartPoint: Center, verticalDirection: Bottom, verticalStartPoint: Bottom }, + 'bottom-start': { horizontalDirection: Right, horizontalStartPoint: Left, verticalDirection: Bottom, verticalStartPoint: Bottom }, + 'bottom-end': { horizontalDirection: Left, horizontalStartPoint: Right, verticalDirection: Bottom, verticalStartPoint: Bottom } + }; + + public overlaySettings: OverlaySettings = { + closeOnEscape: false + }; + + constructor() { + afterNextRender(() => this.targets.forEach((target) => target.showTooltip())); + } +} diff --git a/src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts b/src/app/interactions/tooltip/tooltip-custom/IncomeTaxes.ts similarity index 100% rename from src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts rename to src/app/interactions/tooltip/tooltip-custom/IncomeTaxes.ts diff --git a/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.html b/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.html new file mode 100644 index 0000000000..9c4e031a0e --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.html @@ -0,0 +1,69 @@ + + + Individual Income Taxes + ($2.4T) + + +
+ Individual Income Taxes +
+ + +
+ + In fiscal year (FY) 2024, the largest source of federal revenue was + Individual Income Taxes (49.3% of total revenue). + +
+ + +
+ + + + +
+ Eliza Morales + + +
+
+ + + + +
+
+ Eliza Morales + Software Engineer + In a meeting + Available at 2:00 pm +
+
diff --git a/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.scss b/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.scss new file mode 100644 index 0000000000..babb40b741 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.scss @@ -0,0 +1,135 @@ +:host { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 6.25rem; + padding: clamp(1rem, 100vh - 25rem, 6.25rem) 1rem 1rem; +} + +.trigger { + border: 1px solid var(--ig-gray-300); + border-radius: 0; +} + +.trigger igx-list-item ::ng-deep .igx-list-item__content { + padding: 0.5rem 1rem; +} + +.taxes-trigger { + width: 21.6875rem; +} + +.employee-trigger { + width: 17.5rem; +} + +.taxes-trigger [igxListLineTitle] { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); +} + +.amount { + font-size: 0.8125rem; + line-height: 1.125rem; + letter-spacing: 0.3px; + text-decoration: underline; + color: var(--ig-gray-600); +} + +.avatar { + position: relative; + display: flex; +} + +.avatar igx-badge { + position: absolute; + right: -0.3125rem; + bottom: -0.3125rem; +} + +.avatar igx-icon { + --ig-icon-size: 0.75rem; + + color: #fff; +} + +.custom-tooltip { + gap: 1rem; + padding: 1rem; + border: 1px solid var(--ig-gray-300); + border-radius: 0.5rem; + background: var(--ig-surface-500); + color: var(--ig-gray-900); + box-shadow: var(--ig-elevation-1); +} + +.chart-tooltip { + flex-direction: column; + width: 21.8125rem; +} + +.tooltip-title { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); +} + +.chart { + box-sizing: border-box; + width: 100%; + height: 11.125rem; + padding: 1.5rem 0.5rem; + border: 1px solid var(--ig-gray-300); + border-radius: 0.375rem; + background: var(--ig-surface-500); +} + +.tooltip-description { + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.3px; + color: var(--ig-gray-700); +} + +.employee-tooltip { + width: 17.5rem; +} + +.employee-tooltip .avatar { + flex-shrink: 0; +} + +.employee-tooltip .avatar igx-avatar { + --ig-size: var(--ig-size-large); +} + +.employee-tooltip .avatar igx-badge { + right: -0.1875rem; + bottom: -0.1875rem; +} + +.employee-details { + display: flex; + flex-direction: column; + min-width: 0; +} + +.employee-details .tooltip-title { + margin-bottom: 0.125rem; +} + +.employee-details span:not(.tooltip-title) { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: 400; + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + color: var(--ig-gray-700); +} diff --git a/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.ts b/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.ts new file mode 100644 index 0000000000..264ffd72a3 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-custom/tooltip-custom.component.ts @@ -0,0 +1,45 @@ +import { Component, inject } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; +import { IncomeTaxes } from './IncomeTaxes'; + +const blockIcon = ''; + +@Component({ + selector: 'app-tooltip-custom', + styleUrls: ['./tooltip-custom.component.scss'], + templateUrl: './tooltip-custom.component.html', + imports: [ + IgxTooltipTargetDirective, + IgxTooltipDirective, + IgxListComponent, + IgxListItemComponent, + IgxListLineTitleDirective, + IgxListThumbnailDirective, + IgxListActionDirective, + IgxAvatarComponent, + IgxBadgeComponent, + IgxIconComponent, + IgxCategoryChartModule + ] +}) +export class TooltipCustomComponent { + public incomeTaxes = new IncomeTaxes(); + public avatarUrl = 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png'; + + public positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Right, + horizontalStartPoint: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Bottom, + verticalStartPoint: VerticalAlignment.Bottom + }; + + constructor() { + inject(IgxIconService).addSvgIconFromText('block', blockIcon, 'material'); + } +} diff --git a/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.html b/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.html new file mode 100644 index 0000000000..c66203c0d8 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.html @@ -0,0 +1,21 @@ +
+ + @for (item of placements; track item.value) { + {{ item.label }} + } + + Close Button + Arrow +
+
+
+
+ This is a tooltip message +
+ Multiline message here. +
diff --git a/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.scss b/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.scss new file mode 100644 index 0000000000..555e46f8ba --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.scss @@ -0,0 +1,28 @@ +:host { + display: flex; + flex-direction: column; + align-items: center; + padding: 3.25rem 1rem 1rem; +} + +.settings { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem; +} + +.settings igx-radio-group { + column-gap: 1.5rem; +} + +.target { + box-sizing: border-box; + width: 1.5rem; + height: 1.5rem; + margin-top: 6rem; + border: 1px dashed #e8178a; + border-radius: 0.125rem; + background: rgb(232 23 138 / 20%); +} diff --git a/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.ts b/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.ts new file mode 100644 index 0000000000..b01029cd38 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-overview/tooltip-overview.component.ts @@ -0,0 +1,64 @@ +import { afterNextRender, Component, inject, Injector, ViewChild } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { take } from 'rxjs'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; + +type TooltipPlacement = 'top' | 'right' | 'left' | 'bottom'; + +@Component({ + selector: 'app-tooltip-overview', + styleUrls: ['./tooltip-overview.component.scss'], + templateUrl: './tooltip-overview.component.html', + imports: [FormsModule, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent, IgxTooltipTargetDirective, IgxTooltipDirective] +}) +export class TooltipOverviewComponent { + @ViewChild('target', { static: true }) + public target: IgxTooltipTargetDirective; + + @ViewChild('tooltip', { static: true }) + public tooltip: IgxTooltipDirective; + + public placements: { label: string; value: TooltipPlacement }[] = [ + { label: 'Top', value: 'top' }, + { label: 'Right', value: 'right' }, + { label: 'Left', value: 'left' }, + { label: 'Bottom', value: 'bottom' } + ]; + + public positions: Record = { + top: { horizontalDirection: HorizontalAlignment.Center, horizontalStartPoint: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Top, verticalStartPoint: VerticalAlignment.Top }, + right: { horizontalDirection: HorizontalAlignment.Right, horizontalStartPoint: HorizontalAlignment.Right, verticalDirection: VerticalAlignment.Middle, verticalStartPoint: VerticalAlignment.Middle }, + left: { horizontalDirection: HorizontalAlignment.Left, horizontalStartPoint: HorizontalAlignment.Left, verticalDirection: VerticalAlignment.Middle, verticalStartPoint: VerticalAlignment.Middle }, + bottom: { horizontalDirection: HorizontalAlignment.Center, horizontalStartPoint: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Bottom, verticalStartPoint: VerticalAlignment.Bottom } + }; + + public placement: TooltipPlacement = 'bottom'; + public closeButton = true; + public arrow = true; + + private injector = inject(Injector); + + constructor() { + afterNextRender(() => this.target.showTooltip()); + } + + public onPlacementChange(placement: TooltipPlacement): void { + this.placement = placement; + + if (!this.target.tooltipHidden) { + this.tooltip.closed.pipe(take(1)).subscribe(() => this.target.showTooltip()); + this.target.hideTooltip(); + } + } + + public repositionTooltip(): void { + afterNextRender(() => { + if (!this.tooltip.collapsed) { + this.tooltip.reposition(); + } + }, { injector: this.injector }); + } +} diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html deleted file mode 100644 index 49977d66ce..0000000000 --- a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
- @for (position of positions; track position) { -
- {{ position }} close -
- } - - -
diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss deleted file mode 100644 index 52e8b0fe13..0000000000 --- a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.container { - padding: 0.5rem; -} - -.tooltip-position { - margin: 40px 0 0 120px; - width: 400px; - height: 120px; - border-radius: 0.5rem; -} - -igx-icon { - cursor: default; -} diff --git a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts b/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts deleted file mode 100644 index 72e3c39aa6..0000000000 --- a/src/app/interactions/tooltip/tooltip-placement/tooltip-placement.component.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { Component, QueryList, ViewChild, ViewChildren } from "@angular/core"; -import { IgxButtonDirective, IgxTooltipDirective, TooltipPositionStrategy } from 'igniteui-angular/directives'; -import { HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: "app-tooltip-placement", - styleUrls: ["./tooltip-placement.component.scss"], - templateUrl: "./tooltip-placement.component.html", - imports: [IgxButtonDirective, IgxTooltipDirective, IgxIconComponent] -}) -export class TooltipPlacementComponent { - @ViewChildren(IgxTooltipDirective) - public tooltips!: QueryList; - - @ViewChild(IgxButtonDirective, { static: true }) - public button!: IgxButtonDirective; - - public positions = Array.from(PositionsMap.keys()); - - public showPositions() { - this.tooltips.forEach((tooltip, index) => { - const position = PositionsMap.get(this.positions[index]); - const overlaySettings: OverlaySettings = { - target: this.button.nativeElement, - positionStrategy: new TooltipPositionStrategy(position), - modal: false, - closeOnOutsideClick: false, - closeOnEscape: true, - excludeFromOutsideClick: [this.button.nativeElement] - }; - tooltip.open(overlaySettings); - }); - } -} - -export const PositionsMap = new Map([ - ['top', { - horizontalDirection: HorizontalAlignment.Center, - horizontalStartPoint: HorizontalAlignment.Center, - verticalDirection: VerticalAlignment.Top, - verticalStartPoint: VerticalAlignment.Top - }], - ['top-start', { - horizontalDirection: HorizontalAlignment.Right, - horizontalStartPoint: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top, - verticalStartPoint: VerticalAlignment.Top - }], - ['top-end', { - horizontalDirection: HorizontalAlignment.Left, - horizontalStartPoint: HorizontalAlignment.Right, - verticalDirection: VerticalAlignment.Top, - verticalStartPoint: VerticalAlignment.Top - }], - ['bottom', { - horizontalDirection: HorizontalAlignment.Center, - horizontalStartPoint: HorizontalAlignment.Center, - verticalDirection: VerticalAlignment.Bottom, - verticalStartPoint: VerticalAlignment.Bottom - }], - ['bottom-start', { - horizontalDirection: HorizontalAlignment.Right, - horizontalStartPoint: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Bottom, - verticalStartPoint: VerticalAlignment.Bottom - }], - ['bottom-end', { - horizontalDirection: HorizontalAlignment.Left, - horizontalStartPoint: HorizontalAlignment.Right, - verticalDirection: VerticalAlignment.Bottom, - verticalStartPoint: VerticalAlignment.Bottom - }], - ['right', { - horizontalDirection: HorizontalAlignment.Right, - horizontalStartPoint: HorizontalAlignment.Right, - verticalDirection: VerticalAlignment.Middle, - verticalStartPoint: VerticalAlignment.Middle - }], - ['right-start', { - horizontalDirection: HorizontalAlignment.Right, - horizontalStartPoint: HorizontalAlignment.Right, - verticalDirection: VerticalAlignment.Bottom, - verticalStartPoint: VerticalAlignment.Top - }], - ['right-end', { - horizontalDirection: HorizontalAlignment.Right, - horizontalStartPoint: HorizontalAlignment.Right, - verticalDirection: VerticalAlignment.Top, - verticalStartPoint: VerticalAlignment.Bottom - }], - ['left', { - horizontalDirection: HorizontalAlignment.Left, - horizontalStartPoint: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Middle, - verticalStartPoint: VerticalAlignment.Middle - }], - ['left-start', { - horizontalDirection: HorizontalAlignment.Left, - horizontalStartPoint: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Bottom, - verticalStartPoint: VerticalAlignment.Top - }], - ['left-end', { - horizontalDirection: HorizontalAlignment.Left, - horizontalStartPoint: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top, - verticalStartPoint: VerticalAlignment.Bottom - }] -]); diff --git a/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.html b/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.html new file mode 100644 index 0000000000..8c02abf769 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.html @@ -0,0 +1,10 @@ +
+
+
+
+
+
+
Tooltip message Top
+
Tooltip message Left
+
Tooltip message Right
+
Tooltip message Bottom
diff --git a/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.scss b/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.scss new file mode 100644 index 0000000000..f7fabe0472 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.scss @@ -0,0 +1,28 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + height: 100%; + padding: 1rem; +} + +.positions { + display: flex; + flex-direction: column; + gap: 1.875rem; +} + +.target { + box-sizing: border-box; + width: 1.5rem; + height: 1.5rem; + border: 1px dashed #e8178a; + border-radius: 0.125rem; + background: rgb(232 23 138 / 20%); + pointer-events: none; +} + +.igx-tooltip { + pointer-events: none; +} diff --git a/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.ts b/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.ts new file mode 100644 index 0000000000..e1d18ca352 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-position/tooltip-position.component.ts @@ -0,0 +1,29 @@ +import { afterNextRender, Component, QueryList, ViewChildren } from '@angular/core'; +import { HorizontalAlignment, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-tooltip-position', + styleUrls: ['./tooltip-position.component.scss'], + templateUrl: './tooltip-position.component.html', + imports: [IgxTooltipTargetDirective, IgxTooltipDirective] +}) +export class TooltipPositionComponent { + @ViewChildren(IgxTooltipTargetDirective) + public targets: QueryList; + + public positions: Record<'top' | 'left' | 'right' | 'bottom', PositionSettings> = { + top: { horizontalDirection: HorizontalAlignment.Center, horizontalStartPoint: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Top, verticalStartPoint: VerticalAlignment.Top }, + left: { horizontalDirection: HorizontalAlignment.Left, horizontalStartPoint: HorizontalAlignment.Left, verticalDirection: VerticalAlignment.Middle, verticalStartPoint: VerticalAlignment.Middle }, + right: { horizontalDirection: HorizontalAlignment.Right, horizontalStartPoint: HorizontalAlignment.Right, verticalDirection: VerticalAlignment.Middle, verticalStartPoint: VerticalAlignment.Middle }, + bottom: { horizontalDirection: HorizontalAlignment.Center, horizontalStartPoint: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Bottom, verticalStartPoint: VerticalAlignment.Bottom } + }; + + public overlaySettings: OverlaySettings = { + closeOnEscape: false + }; + + constructor() { + afterNextRender(() => this.targets.forEach((target) => target.showTooltip())); + } +} diff --git a/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.html b/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.html deleted file mode 100644 index 061186b47a..0000000000 --- a/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.html +++ /dev/null @@ -1,14 +0,0 @@ -
- location_on - -
-
- -
-
Infragistics Inc. HQ
-
2 Commerce Dr, Cranbury, NJ 08512, USA
-
-
-
-
diff --git a/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.scss b/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.scss deleted file mode 100644 index 17907603ee..0000000000 --- a/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.scss +++ /dev/null @@ -1,33 +0,0 @@ -.location:hover { - cursor: pointer; -} - -.map { - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - width: 200px; - height: 252px; - background-image: url("../../../../assets/images/card/media/infragisticsMap.png"); - border: 1px solid #D4D4D4; -} - -.locationTooltip { - width: 310px; - padding: 3px; - font-size: 13px; -} - -.locationTooltipContent { - display: flex; - justify-content: center; - align-items: center; -} - -.logo { - margin-right: 10px; - min-width: 25px; - width: 45px; - height: 45px; -} diff --git a/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.ts b/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.ts deleted file mode 100644 index 2551556dfc..0000000000 --- a/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; -import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; - -@Component({ - selector: 'app-tooltip-rich', - styleUrls: ['./tooltip-rich.component.scss'], - templateUrl: './tooltip-rich.component.html', - imports: [IgxIconComponent, IgxTooltipTargetDirective, IgxTooltipDirective, IgxAvatarComponent] -}) -export class TooltipRichComponent { } diff --git a/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.html b/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.html deleted file mode 100644 index 3715ff0298..0000000000 --- a/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.html +++ /dev/null @@ -1,11 +0,0 @@ - - - -
- Her name is Madelyn James -
diff --git a/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.scss b/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.ts b/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.ts deleted file mode 100644 index 580f372990..0000000000 --- a/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; - -@Component({ - selector: 'app-tooltip-simple', - styleUrls: ['./tooltip-simple.component.scss'], - templateUrl: './tooltip-simple.component.html', - imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxTooltipDirective] -}) -export class TooltipSimpleComponent { } diff --git a/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.html b/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.html deleted file mode 100644 index 01aacba1e1..0000000000 --- a/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - - -
-
- Her name is Madelyn James -
-
diff --git a/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.scss b/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.scss deleted file mode 100644 index 0de062c8c8..0000000000 --- a/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "igniteui-angular/theming" as *; - -$dark-tooltip: tooltip-theme( - $text-color: #ecaa53, - $background: #011627, - $border-radius: 6px, -); - -:host { - @include tokens($dark-tooltip); -} diff --git a/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.ts b/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.ts deleted file mode 100644 index ecf19c4a55..0000000000 --- a/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; -import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; - -@Component({ - selector: 'app-tooltip-style', - styleUrls: ['./tooltip-style.component.scss'], - templateUrl: './tooltip-style.component.html', - imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxOverlayOutletDirective, IgxTooltipDirective] -}) -export class TooltipStyleComponent { } diff --git a/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html new file mode 100644 index 0000000000..837ff6e5b5 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html @@ -0,0 +1,20 @@ + + +
+ + + + +
+ Aron Watson + + +
+ + + My notifications are silenced to focus. Urgent matters only, please, + otherwise I'll reply when I'm free. + +
+ +
The date when your car was first registered
diff --git a/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.scss b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.scss new file mode 100644 index 0000000000..03f136155b --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.scss @@ -0,0 +1,65 @@ +@use "sass:meta"; +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-angular"); + +app-tooltip-styling { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 6.25rem; + padding: 3.9375rem 1rem 1rem; +} + +.trigger { + width: 17.5rem; + border: 1px solid #e0e0e0; +} + +.trigger .igx-list-item__content { + padding: 0.5rem 1rem; +} + +.avatar { + position: relative; + display: flex; +} + +.avatar igx-badge { + position: absolute; + right: -0.3125rem; + bottom: -0.3125rem; +} + +.avatar igx-icon { + --ig-icon-size: 0.75rem; + + color: #fff; +} + +.registration { + --ig-size: var(--ig-size-small); + + width: 20.1875rem; +} + +.status-tooltip { + --ig-tooltip-background: rgb(255 233 238 / 90%); + --ig-tooltip-text-color: #212121; + --ig-tooltip-border-radius: 0.125rem; + --ig-tooltip-elevation: var(--ig-elevation-1); + + width: 12.5rem; + padding: 0.1875rem 0.5rem; +} + +.status-tooltip igx-icon { + --ig-icon-size: 1.125rem; + + flex-shrink: 0; + color: #ff134a; +} + +.hint-tooltip { + --ig-tooltip-background: rgb(1 118 255 / 90%); + --ig-tooltip-text-color: #fff; +} diff --git a/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.ts b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.ts new file mode 100644 index 0000000000..f81362e22e --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.ts @@ -0,0 +1,41 @@ +import { Component, inject, ViewEncapsulation } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; + +const blockIcon = ''; + +@Component({ + selector: 'app-tooltip-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./tooltip-styling.component.scss'], + templateUrl: './tooltip-styling.component.html', + imports: [ + IgxTooltipTargetDirective, + IgxTooltipDirective, + IgxListComponent, + IgxListItemComponent, + IgxListLineTitleDirective, + IgxListThumbnailDirective, + IgxAvatarComponent, + IgxBadgeComponent, + IgxIconComponent, + IgxDatePickerComponent + ] +}) +export class TooltipStylingComponent { + public positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Bottom, + verticalStartPoint: VerticalAlignment.Bottom + }; + + constructor() { + inject(IgxIconService).addSvgIconFromText('block', blockIcon, 'material'); + } +} diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html deleted file mode 100644 index fba78cb2b9..0000000000 --- a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - - -
-
- Her name is Madelyn James -
-
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.scss b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts deleted file mode 100644 index 0affa8500a..0000000000 --- a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; -import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; - -@Component({ - selector: 'app-tooltip-tailwind-style', - styleUrls: ['./tooltip-tailwind-style.component.scss'], - templateUrl: './tooltip-tailwind-style.component.html', - imports: [IgxAvatarComponent, IgxTooltipTargetDirective, IgxOverlayOutletDirective, IgxTooltipDirective] -}) -export class TooltipTailwindStyleComponent { } diff --git a/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.html b/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.html new file mode 100644 index 0000000000..09925e907c --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.html @@ -0,0 +1,77 @@ +
+ + + + + BTC + + + Daily: + 2,6% + + + +
+
+ + BTC + + + + Exchange Balance + USD 81,459.00 + + + Assets Balance + USD 46,287.90 + +
+
+
+ + + +
+
+
+ + +
+
+
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.scss b/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.scss new file mode 100644 index 0000000000..f8555ace83 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.scss @@ -0,0 +1,12 @@ +@use "sass:meta"; +@import url("https://use.typekit.net/bng2zgw.css"); +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-angular"); + +app-tooltip-tailwind-styling { + display: block; + padding: 0.5rem; +} + +.igx-overlay__content:has(> .pointer-events-none) { + pointer-events: none; +} diff --git a/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.ts b/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.ts new file mode 100644 index 0000000000..e76b4750e4 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component.ts @@ -0,0 +1,61 @@ +import { Component, inject, ViewEncapsulation } from '@angular/core'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective } from 'igniteui-angular/list'; +import { IgxCategoryChartModule, IgxPieChartModule } from 'igniteui-angular-charts'; + +const bitcoinIcon = ''; + +@Component({ + selector: 'app-tooltip-tailwind-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./tooltip-tailwind-styling.component.scss'], + templateUrl: './tooltip-tailwind-styling.component.html', + imports: [ + IgxTooltipTargetDirective, + IgxTooltipDirective, + IgxListComponent, + IgxListItemComponent, + IgxListLineTitleDirective, + IgxListActionDirective, + IgxIconComponent, + IgxCategoryChartModule, + IgxPieChartModule + ] +}) +export class TooltipTailwindStylingComponent { + public portfolio = [ + { asset: 'Bitcoin', share: 56 }, + { asset: 'Ethereum', share: 24 }, + { asset: 'Other', share: 20 } + ]; + + public balanceHistory = [ + { period: '2021', exchange: 7, assets: 5 }, + { period: 'Jul 2021', exchange: 10, assets: 8 }, + { period: '2022', exchange: 12, assets: 10 }, + { period: 'Jul 2022', exchange: 20, assets: 15 }, + { period: '2023', exchange: 20, assets: 13 }, + { period: 'Jul 2023', exchange: 28, assets: 8 }, + { period: '2024', exchange: 55, assets: 24 }, + { period: 'Jul 2024', exchange: 58, assets: 16 }, + { period: '2025', exchange: 43, assets: 18 } + ]; + + public positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Right, + horizontalStartPoint: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Bottom, + verticalStartPoint: VerticalAlignment.Bottom + }; + + public portfolioPositionSettings: PositionSettings = { + ...this.positionSettings, + offset: 0 + }; + + constructor() { + inject(IgxIconService).addSvgIconFromText('bitcoin', bitcoinIcon, 'material'); + } +} diff --git a/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.html b/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.html deleted file mode 100644 index c08093e6f7..0000000000 --- a/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.html +++ /dev/null @@ -1,84 +0,0 @@ -
- - -

Default triggers

- - -

- Hovering over the button below will display the tooltip using its default configuration: it appears on pointer enter and hides on pointer leave or click. -

- - - -
- I am shown on pointer enter and hidden on pointer leave and/or click. -
- - - -

Focus based

- - -

- In this instance, the tooltip is bound to show on its anchor - focus and will hide when its anchor is - blurred. -

-

Try to navigate with a Tab key to the anchor to see the effect.

- - - -
- I am shown on focus and hidden on blur. -
- - - -

Same trigger(s) for showing and hiding

- - -

- The same trigger can be bound to both show and hide the tooltip. The - button below has its tooltip bound to show/hide on - click. -

- - - -
- I am shown on click and will hide on anchor click. -
- - - -

Keyboard interactions

- - -

- Keyboard interactions are also supported. The button below has its - tooltip bound to show on a keypress and hide on a - keypress or blur. -

-

Try it out by focusing the button and pressing a key.

- - - -
- I am shown on a keypress and will hide on a keypress or blur. -
- - - -

Custom events

- - -

- The tooltip supports any DOM event, including custom events. Try entering a value in the input below, then "commit" it by either blurring the input or pressing Enter. -

- - - -
- Value changed! -
-
diff --git a/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.scss b/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.scss deleted file mode 100644 index 74977a65ed..0000000000 --- a/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.scss +++ /dev/null @@ -1,31 +0,0 @@ -.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; -} diff --git a/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.ts b/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.ts deleted file mode 100644 index 544f265896..0000000000 --- a/src/app/interactions/tooltip/tooltip-triggers/tooltip-triggers.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -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 { } diff --git a/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.html b/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.html new file mode 100644 index 0000000000..9a198b6bd9 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.html @@ -0,0 +1,10 @@ +
+
+
+
+
+
+
Tooltip message
+
Tooltip message
+
Tooltip message
+
Tooltip message
diff --git a/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.scss b/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.scss new file mode 100644 index 0000000000..9a00da30ba --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.scss @@ -0,0 +1,24 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + height: 100%; + padding: 2.875rem 1rem 1rem; +} + +.variants { + display: grid; + grid-template-columns: repeat(2, 1.5rem); + column-gap: 11.375rem; + row-gap: 5.125rem; +} + +.target { + box-sizing: border-box; + width: 1.5rem; + height: 1.5rem; + border: 1px dashed #e8178a; + border-radius: 0.125rem; + background: rgb(232 23 138 / 20%); +} diff --git a/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.ts b/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.ts new file mode 100644 index 0000000000..d027f95d50 --- /dev/null +++ b/src/app/interactions/tooltip/tooltip-variants/tooltip-variants.component.ts @@ -0,0 +1,25 @@ +import { afterNextRender, Component, QueryList, ViewChildren } from '@angular/core'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-tooltip-variants', + styleUrls: ['./tooltip-variants.component.scss'], + templateUrl: './tooltip-variants.component.html', + imports: [IgxTooltipTargetDirective, IgxTooltipDirective] +}) +export class TooltipVariantsComponent { + @ViewChildren(IgxTooltipTargetDirective) + public targets: QueryList; + + public positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Center, + horizontalStartPoint: HorizontalAlignment.Center, + verticalDirection: VerticalAlignment.Top, + verticalStartPoint: VerticalAlignment.Top + }; + + constructor() { + afterNextRender(() => this.targets.forEach((target) => target.showTooltip())); + } +} From cec167f0f4eb14e7f80627c7d32b1a56454c2ae6 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 20 Oct 2026 15:06:03 +0300 Subject: [PATCH 2/3] fix(tooltip): update styling picture --- .../tooltip/tooltip-styling/tooltip-styling.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html index 837ff6e5b5..a177a3a661 100644 --- a/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html +++ b/src/app/interactions/tooltip/tooltip-styling/tooltip-styling.component.html @@ -1,7 +1,7 @@
- + From 5f18f05c7aa872b957798dad46728308b3f81bd6 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 22 Oct 2026 12:09:19 +0300 Subject: [PATCH 3/3] fix(live-editing): add tailwind to tooltip tailwind styling sample The sample was generated without tailwindcss, @tailwindcss/postcss and .postcssrc.json, so its utility classes had no styles in StackBlitz and CodeSandbox. Co-Authored-By: Claude Opus 5.5 --- live-editing/configs/TooltipConfigGenerator.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/live-editing/configs/TooltipConfigGenerator.ts b/live-editing/configs/TooltipConfigGenerator.ts index db7b1ea24f..15afd34e17 100644 --- a/live-editing/configs/TooltipConfigGenerator.ts +++ b/live-editing/configs/TooltipConfigGenerator.ts @@ -57,7 +57,8 @@ export class TooltipConfigGenerator implements IConfigGenerator { configs.push(new Config({ component: 'TooltipTailwindStylingComponent', appConfig: BaseAppConfig, - additionalDependencies: ['igniteui-angular-charts', 'igniteui-angular-core'], + additionalDependencies: ['igniteui-angular-charts', 'igniteui-angular-core', 'tailwindcss', '@tailwindcss/postcss'], + additionalFiles: ['.postcssrc.json'], shortenComponentPathBy: "/interactions/tooltip/" }));