From 67687f7715eda9f1bb4c6965c5cb17c1b4f811f5 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Mon, 19 Oct 2026 11:26:36 +0300 Subject: [PATCH 1/3] fix(tooltip): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/tooltip/advanced/src/index.css | 426 ------------------ samples/inputs/tooltip/advanced/src/index.tsx | 308 ------------- .../.devcontainer/devcontainer.json | 0 .../{advanced => arrow-position}/.eslintrc.js | 0 .../{placement => arrow-position}/README.md | 8 +- .../{placement => arrow-position}/index.html | 2 +- .../{rich => arrow-position}/package.json | 4 +- .../sandbox.config.json | 0 .../tooltip/arrow-position/src/index.css | 90 ++++ .../tooltip/arrow-position/src/index.tsx | 69 +++ .../tsconfig.json | 0 .../vite.config.js | 0 .../.devcontainer/devcontainer.json | 0 .../{placement => custom}/.eslintrc.js | 0 .../inputs/tooltip/{rich => custom}/README.md | 8 +- .../tooltip/{rich => custom}/index.html | 2 +- .../tooltip/{advanced => custom}/package.json | 4 +- .../{placement => custom}/sandbox.config.json | 0 .../{advanced => custom}/src/IncomeTaxes.ts | 0 samples/inputs/tooltip/custom/src/index.css | 142 ++++++ samples/inputs/tooltip/custom/src/index.tsx | 112 +++++ .../{placement => custom}/tsconfig.json | 0 .../{placement => custom}/vite.config.js | 0 samples/inputs/tooltip/overview/package.json | 4 +- samples/inputs/tooltip/overview/src/index.css | 31 +- samples/inputs/tooltip/overview/src/index.tsx | 84 +++- .../inputs/tooltip/placement/src/index.css | 13 - .../inputs/tooltip/placement/src/index.tsx | 64 --- .../.devcontainer/devcontainer.json | 0 .../tooltip/{rich => position}/.eslintrc.js | 0 .../tooltip/{advanced => position}/README.md | 8 +- .../tooltip/{advanced => position}/index.html | 2 +- .../{placement => position}/package.json | 4 +- .../{rich => position}/sandbox.config.json | 0 samples/inputs/tooltip/position/src/index.css | 29 ++ samples/inputs/tooltip/position/src/index.tsx | 45 ++ .../tooltip/{rich => position}/tsconfig.json | 0 .../tooltip/{rich => position}/vite.config.js | 0 samples/inputs/tooltip/rich/src/index.css | 33 -- samples/inputs/tooltip/rich/src/index.tsx | 48 -- samples/inputs/tooltip/styling/package.json | 4 +- .../inputs/tooltip/styling/src/Styling.css | 8 - samples/inputs/tooltip/styling/src/index.css | 67 ++- samples/inputs/tooltip/styling/src/index.tsx | 74 ++- .../.devcontainer/devcontainer.json | 0 .../.eslintrc.js | 0 .../inputs/tooltip/tailwind-styling/README.md | 56 +++ .../tooltip/tailwind-styling/index.html | 11 + .../tooltip/tailwind-styling/package.json | 45 ++ .../sandbox.config.json | 0 .../tooltip/tailwind-styling/src/index.css | 19 + .../tooltip/tailwind-styling/src/index.tsx | 150 ++++++ .../tsconfig.json | 0 .../tooltip/tailwind-styling/vite.config.js | 13 + samples/inputs/tooltip/triggers/src/index.css | 29 -- samples/inputs/tooltip/triggers/src/index.tsx | 139 ------ .../variants/.devcontainer/devcontainer.json | 4 + samples/inputs/tooltip/variants/.eslintrc.js | 75 +++ .../tooltip/{triggers => variants}/README.md | 8 +- .../tooltip/{triggers => variants}/index.html | 2 +- .../{triggers => variants}/package.json | 4 +- .../tooltip/variants/sandbox.config.json | 5 + samples/inputs/tooltip/variants/src/index.css | 25 + samples/inputs/tooltip/variants/src/index.tsx | 34 ++ samples/inputs/tooltip/variants/tsconfig.json | 44 ++ .../{triggers => variants}/vite.config.js | 0 68 files changed, 1208 insertions(+), 1152 deletions(-) delete mode 100644 samples/inputs/tooltip/advanced/src/index.css delete mode 100644 samples/inputs/tooltip/advanced/src/index.tsx rename samples/inputs/tooltip/{advanced => arrow-position}/.devcontainer/devcontainer.json (100%) rename samples/inputs/tooltip/{advanced => arrow-position}/.eslintrc.js (100%) rename samples/inputs/tooltip/{placement => arrow-position}/README.md (85%) rename samples/inputs/tooltip/{placement => arrow-position}/index.html (85%) rename samples/inputs/tooltip/{rich => arrow-position}/package.json (86%) rename samples/inputs/tooltip/{advanced => arrow-position}/sandbox.config.json (100%) create mode 100644 samples/inputs/tooltip/arrow-position/src/index.css create mode 100644 samples/inputs/tooltip/arrow-position/src/index.tsx rename samples/inputs/tooltip/{advanced => arrow-position}/tsconfig.json (100%) rename samples/inputs/tooltip/{advanced => arrow-position}/vite.config.js (100%) rename samples/inputs/tooltip/{placement => custom}/.devcontainer/devcontainer.json (100%) rename samples/inputs/tooltip/{placement => custom}/.eslintrc.js (100%) rename samples/inputs/tooltip/{rich => custom}/README.md (86%) rename samples/inputs/tooltip/{rich => custom}/index.html (88%) rename samples/inputs/tooltip/{advanced => custom}/package.json (87%) rename samples/inputs/tooltip/{placement => custom}/sandbox.config.json (100%) rename samples/inputs/tooltip/{advanced => custom}/src/IncomeTaxes.ts (100%) create mode 100644 samples/inputs/tooltip/custom/src/index.css create mode 100644 samples/inputs/tooltip/custom/src/index.tsx rename samples/inputs/tooltip/{placement => custom}/tsconfig.json (100%) rename samples/inputs/tooltip/{placement => custom}/vite.config.js (100%) delete mode 100644 samples/inputs/tooltip/placement/src/index.css delete mode 100644 samples/inputs/tooltip/placement/src/index.tsx rename samples/inputs/tooltip/{rich => position}/.devcontainer/devcontainer.json (100%) rename samples/inputs/tooltip/{rich => position}/.eslintrc.js (100%) rename samples/inputs/tooltip/{advanced => position}/README.md (91%) rename samples/inputs/tooltip/{advanced => position}/index.html (87%) rename samples/inputs/tooltip/{placement => position}/package.json (87%) rename samples/inputs/tooltip/{rich => position}/sandbox.config.json (100%) create mode 100644 samples/inputs/tooltip/position/src/index.css create mode 100644 samples/inputs/tooltip/position/src/index.tsx rename samples/inputs/tooltip/{rich => position}/tsconfig.json (100%) rename samples/inputs/tooltip/{rich => position}/vite.config.js (100%) delete mode 100644 samples/inputs/tooltip/rich/src/index.css delete mode 100644 samples/inputs/tooltip/rich/src/index.tsx delete mode 100644 samples/inputs/tooltip/styling/src/Styling.css rename samples/inputs/tooltip/{triggers => tailwind-styling}/.devcontainer/devcontainer.json (100%) rename samples/inputs/tooltip/{triggers => tailwind-styling}/.eslintrc.js (100%) create mode 100644 samples/inputs/tooltip/tailwind-styling/README.md create mode 100644 samples/inputs/tooltip/tailwind-styling/index.html create mode 100644 samples/inputs/tooltip/tailwind-styling/package.json rename samples/inputs/tooltip/{triggers => tailwind-styling}/sandbox.config.json (100%) create mode 100644 samples/inputs/tooltip/tailwind-styling/src/index.css create mode 100644 samples/inputs/tooltip/tailwind-styling/src/index.tsx rename samples/inputs/tooltip/{triggers => tailwind-styling}/tsconfig.json (100%) create mode 100644 samples/inputs/tooltip/tailwind-styling/vite.config.js delete mode 100644 samples/inputs/tooltip/triggers/src/index.css delete mode 100644 samples/inputs/tooltip/triggers/src/index.tsx create mode 100644 samples/inputs/tooltip/variants/.devcontainer/devcontainer.json create mode 100644 samples/inputs/tooltip/variants/.eslintrc.js rename samples/inputs/tooltip/{triggers => variants}/README.md (91%) rename samples/inputs/tooltip/{triggers => variants}/index.html (87%) rename samples/inputs/tooltip/{triggers => variants}/package.json (87%) create mode 100644 samples/inputs/tooltip/variants/sandbox.config.json create mode 100644 samples/inputs/tooltip/variants/src/index.css create mode 100644 samples/inputs/tooltip/variants/src/index.tsx create mode 100644 samples/inputs/tooltip/variants/tsconfig.json rename samples/inputs/tooltip/{triggers => variants}/vite.config.js (100%) diff --git a/browser/public/meta.json b/browser/public/meta.json index 3274837cd5..e4dae66144 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-10-01 17:08:02","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-16 18:26:55","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 3274837cd5..e4dae66144 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-10-01 17:08:02","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-16 18:26:55","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/tooltip/advanced/src/index.css b/samples/inputs/tooltip/advanced/src/index.css deleted file mode 100644 index 87fe8818c7..0000000000 --- a/samples/inputs/tooltip/advanced/src/index.css +++ /dev/null @@ -1,426 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -.container { - display: flex; - flex-wrap: wrap; - flex-direction: row; - max-height: max-content; - max-width: 680px; - gap: 1rem; -} - -.sample { - padding: 1rem; -} - -igc-tooltip::part(bottom) { - display: none; -} - -igc-tooltip::part(base) { - 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; - - igc-list-item { - padding: 0.5rem 1rem; - } - - p[slot="start"] { - font-size: 0.875rem; - line-height: 1.5rem; - letter-spacing: 0.25px; - font-weight: 400; - color: var(--ig-gray-900); - } - - 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; - - igc-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; - } - - igc-avatar { - --size: 2.5rem; - } - } -} - -.trigger:nth-of-type(6) { - cursor: pointer; -} - -.trigger:nth-of-type(n+5) { - margin-left: 1.5rem; -} - -.list::part(base) { - padding: unset; -} - -.list { - - igc-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; - } - - igc-list-item { - padding: 0.5rem 0.5rem 0.5rem 0.281rem; - --item-text-color: var(--ig-gray-900); - cursor: pointer; - font-size: 1rem; - line-height: 1.5rem; - font-weight: 400; - letter-spacing: 0.15px; - } - - igc-list-header { - margin-left: 0.5rem; - } - - igc-icon { - --size: 0.938rem; - --ig-icon-color: var(--ig-gray-700); - display: inline-block; - vertical-align: middle; - margin-right: 1rem; - } - } -} - -.chart::part(base) { - 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; - } - - .ig-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::part(base) { - border-radius: 0.5rem; - padding: 1rem; - gap: 1rem; -} - -.employee { - - igc-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; - - igc-badge { - --background-color: var(--ig-error-500); - --_badge-size: 1.25rem; - box-shadow: var(--ig-elevation-1); - position: absolute; - bottom: -3px; - right: -3px; - } -} - -.multiline::part(base) { - border-radius: 0.125rem; - gap: 0.5rem; - background-color: var(--ig-error-50); - border: unset; - padding: 0.188rem 0.5rem; -} - -.multiline::part(bottom) { - display: block; - border-bottom-color: var(--ig-error-50); -} - -.multiline { - igc-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::part(base) { - border-radius: 0.25rem; - padding: 1rem 1rem 0.5rem 1rem; - gap: 0.5rem; - display: flex; - flex-direction: column; -} - -.btcBtn { - - igc-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; - } - - igc-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: 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; - - igc-button { - font-size: 0.875rem; - line-height: 1rem; - letter-spacing: 0.75px; - } - } -} - -.btc::part(base) { - 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 { - - igc-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; - } - - igc-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/samples/inputs/tooltip/advanced/src/index.tsx b/samples/inputs/tooltip/advanced/src/index.tsx deleted file mode 100644 index 62c9fcb1f9..0000000000 --- a/samples/inputs/tooltip/advanced/src/index.tsx +++ /dev/null @@ -1,308 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { - IgrList, - IgrListItem, - IgrListHeader, - IgrBadge, - IgrButton, - IgrCard, - IgrAvatar, - IgrTooltip, - IgrIcon, - registerIconFromText, - IgrCardHeader, -} from "igniteui-react"; -import { - IgrCategoryChartModule, - IgrCategoryChart, -} from "igniteui-react-charts"; -import { IncomeTaxes } from "./IncomeTaxes"; -import "igniteui-webcomponents/themes/light/material.css"; - -IgrCategoryChartModule.register(); - -const dollarIcon = ''; -const filterIcon = ''; -const linkIcon = ''; -const infoIcon = ''; -const blockIcon = ''; -const btcIcon = ''; - -registerIconFromText("dollar", dollarIcon); -registerIconFromText("filter", filterIcon); -registerIconFromText("link", linkIcon); -registerIconFromText("info", infoIcon); -registerIconFromText("block", blockIcon); -registerIconFromText("btc", btcIcon); -export default class TooltipAdvanced extends React.Component { - private chart: IgrCategoryChart; - private chartRef(r: IgrCategoryChart) { - this.chart = r; - this.setState({}); - } - - constructor(props: any) { - super(props); - this.chartRef = this.chartRef.bind(this); - } - - public render(): JSX.Element { - return ( -
- - -

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

-
- -
- Deposit - Withdraw -
- - - -

Advanced sticky tooltip

- - - -
- -
- BTC -
-
-

- Daily: + 2,6% -

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

Exchange Balance

-

USD 356.12.45

-
-
-

Assets Balance

-

USD 46.28.79

-
- - -
- ); - } - - private _incomeTaxes: IncomeTaxes = null; - public get incomeTaxes(): IncomeTaxes { - if (this._incomeTaxes == null) { - this._incomeTaxes = new IncomeTaxes(); - } - return this._incomeTaxes; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); diff --git a/samples/inputs/tooltip/advanced/.devcontainer/devcontainer.json b/samples/inputs/tooltip/arrow-position/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/tooltip/advanced/.devcontainer/devcontainer.json rename to samples/inputs/tooltip/arrow-position/.devcontainer/devcontainer.json diff --git a/samples/inputs/tooltip/advanced/.eslintrc.js b/samples/inputs/tooltip/arrow-position/.eslintrc.js similarity index 100% rename from samples/inputs/tooltip/advanced/.eslintrc.js rename to samples/inputs/tooltip/arrow-position/.eslintrc.js diff --git a/samples/inputs/tooltip/placement/README.md b/samples/inputs/tooltip/arrow-position/README.md similarity index 85% rename from samples/inputs/tooltip/placement/README.md rename to samples/inputs/tooltip/arrow-position/README.md index 25e803a16c..a09cb7547b 100644 --- a/samples/inputs/tooltip/placement/README.md +++ b/samples/inputs/tooltip/arrow-position/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Placement feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Arrow Position feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Placeme View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/inputs/tooltip/placement +cd ./samples/inputs/tooltip/arrow-position ``` open above folder in VS Code or type: diff --git a/samples/inputs/tooltip/placement/index.html b/samples/inputs/tooltip/arrow-position/index.html similarity index 85% rename from samples/inputs/tooltip/placement/index.html rename to samples/inputs/tooltip/arrow-position/index.html index 4d63f141a8..ce2da523b2 100644 --- a/samples/inputs/tooltip/placement/index.html +++ b/samples/inputs/tooltip/arrow-position/index.html @@ -1,7 +1,7 @@ - Tooltip Placement + Tooltip Arrow Position diff --git a/samples/inputs/tooltip/rich/package.json b/samples/inputs/tooltip/arrow-position/package.json similarity index 86% rename from samples/inputs/tooltip/rich/package.json rename to samples/inputs/tooltip/arrow-position/package.json index 795695786c..d36ea4d627 100644 --- a/samples/inputs/tooltip/rich/package.json +++ b/samples/inputs/tooltip/arrow-position/package.json @@ -1,6 +1,6 @@ { - "name": "react-button-overview", - "description": "This project provides example of Button Overview using Infragistics React components", + "name": "react-tooltip-arrow-position", + "description": "This project provides an example of Tooltip arrow position using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/tooltip/advanced/sandbox.config.json b/samples/inputs/tooltip/arrow-position/sandbox.config.json similarity index 100% rename from samples/inputs/tooltip/advanced/sandbox.config.json rename to samples/inputs/tooltip/arrow-position/sandbox.config.json diff --git a/samples/inputs/tooltip/arrow-position/src/index.css b/samples/inputs/tooltip/arrow-position/src/index.css new file mode 100644 index 0000000000..77c38b84d1 --- /dev/null +++ b/samples/inputs/tooltip/arrow-position/src/index.css @@ -0,0 +1,90 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + 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; +} + +igc-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/samples/inputs/tooltip/arrow-position/src/index.tsx b/samples/inputs/tooltip/arrow-position/src/index.tsx new file mode 100644 index 0000000000..4ff64fdd26 --- /dev/null +++ b/samples/inputs/tooltip/arrow-position/src/index.tsx @@ -0,0 +1,69 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTooltip } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +type TooltipPlacement = + | 'top' | 'top-start' | 'top-end' + | 'left' | 'left-start' | 'left-end' + | 'right' | 'right-start' | 'right-end' + | 'bottom' | 'bottom-start' | 'bottom-end'; + +const 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' }, +]; + +const blockEscape = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + event.stopImmediatePropagation(); + } +}; + +export default function TooltipArrowPosition(): JSX.Element { + useEffect(() => { + window.addEventListener('keydown', blockEscape, true); + return () => window.removeEventListener('keydown', blockEscape, true); + }, []); + + return ( +
+
+ {placements.map(({ label, value }) => { + const [side, alignment = 'center'] = value.split('-'); + + return ( +
+ {label} +
+ +
+ +
+ ); + })} +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/tooltip/advanced/tsconfig.json b/samples/inputs/tooltip/arrow-position/tsconfig.json similarity index 100% rename from samples/inputs/tooltip/advanced/tsconfig.json rename to samples/inputs/tooltip/arrow-position/tsconfig.json diff --git a/samples/inputs/tooltip/advanced/vite.config.js b/samples/inputs/tooltip/arrow-position/vite.config.js similarity index 100% rename from samples/inputs/tooltip/advanced/vite.config.js rename to samples/inputs/tooltip/arrow-position/vite.config.js diff --git a/samples/inputs/tooltip/placement/.devcontainer/devcontainer.json b/samples/inputs/tooltip/custom/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/tooltip/placement/.devcontainer/devcontainer.json rename to samples/inputs/tooltip/custom/.devcontainer/devcontainer.json diff --git a/samples/inputs/tooltip/placement/.eslintrc.js b/samples/inputs/tooltip/custom/.eslintrc.js similarity index 100% rename from samples/inputs/tooltip/placement/.eslintrc.js rename to samples/inputs/tooltip/custom/.eslintrc.js diff --git a/samples/inputs/tooltip/rich/README.md b/samples/inputs/tooltip/custom/README.md similarity index 86% rename from samples/inputs/tooltip/rich/README.md rename to samples/inputs/tooltip/custom/README.md index 12bb7ab19f..4f949388ab 100644 --- a/samples/inputs/tooltip/rich/README.md +++ b/samples/inputs/tooltip/custom/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Rich feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Custom feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Rich fe View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/inputs/tooltip/rich +cd ./samples/inputs/tooltip/custom ``` open above folder in VS Code or type: diff --git a/samples/inputs/tooltip/rich/index.html b/samples/inputs/tooltip/custom/index.html similarity index 88% rename from samples/inputs/tooltip/rich/index.html rename to samples/inputs/tooltip/custom/index.html index c09e22a438..2523ecce4e 100644 --- a/samples/inputs/tooltip/rich/index.html +++ b/samples/inputs/tooltip/custom/index.html @@ -1,7 +1,7 @@ - Tooltip Rich + Tooltip Custom diff --git a/samples/inputs/tooltip/advanced/package.json b/samples/inputs/tooltip/custom/package.json similarity index 87% rename from samples/inputs/tooltip/advanced/package.json rename to samples/inputs/tooltip/custom/package.json index 40a7550d06..261c36a928 100644 --- a/samples/inputs/tooltip/advanced/package.json +++ b/samples/inputs/tooltip/custom/package.json @@ -1,6 +1,6 @@ { - "name": "react-button-overview", - "description": "This project provides example of Button Overview using Infragistics React components", + "name": "react-tooltip-custom", + "description": "This project provides an example of Tooltip custom using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/tooltip/placement/sandbox.config.json b/samples/inputs/tooltip/custom/sandbox.config.json similarity index 100% rename from samples/inputs/tooltip/placement/sandbox.config.json rename to samples/inputs/tooltip/custom/sandbox.config.json diff --git a/samples/inputs/tooltip/advanced/src/IncomeTaxes.ts b/samples/inputs/tooltip/custom/src/IncomeTaxes.ts similarity index 100% rename from samples/inputs/tooltip/advanced/src/IncomeTaxes.ts rename to samples/inputs/tooltip/custom/src/IncomeTaxes.ts diff --git a/samples/inputs/tooltip/custom/src/index.css b/samples/inputs/tooltip/custom/src/index.css new file mode 100644 index 0000000000..a41cc2ec5b --- /dev/null +++ b/samples/inputs/tooltip/custom/src/index.css @@ -0,0 +1,142 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + 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 igc-list-item { + padding: 0.5rem 1rem; +} + +.taxes-trigger { + width: 21.6875rem; +} + +.employee-trigger { + width: 17.5rem; +} + +.taxes-trigger igc-list-item::part(start) { + display: none; +} + +.taxes-trigger span[slot="title"] { + 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 igc-badge { + position: absolute; + right: -0.3125rem; + bottom: -0.3125rem; +} + +.avatar igc-icon { + --ig-icon-size: 0.75rem; + + color: #fff; +} + +.custom-tooltip::part(base) { + 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::part(base) { + 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::part(base) { + width: 17.5rem; +} + +.employee-tooltip .avatar { + flex-shrink: 0; +} + +.employee-tooltip .avatar igc-avatar { + --ig-size: var(--ig-size-large); +} + +.employee-tooltip .avatar igc-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/samples/inputs/tooltip/custom/src/index.tsx b/samples/inputs/tooltip/custom/src/index.tsx new file mode 100644 index 0000000000..84366644dc --- /dev/null +++ b/samples/inputs/tooltip/custom/src/index.tsx @@ -0,0 +1,112 @@ +import React, { useRef } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrAvatar, + IgrBadge, + IgrIcon, + IgrList, + IgrListItem, + IgrTooltip, + registerIconFromText, +} from 'igniteui-react'; +import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts'; +import { IncomeTaxes } from './IncomeTaxes'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrCategoryChartModule.register(); + +const blockIcon = ''; + +registerIconFromText('block', blockIcon, 'material'); + +const incomeTaxes = new IncomeTaxes(); +const avatarUrl = 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png'; + +export default function TooltipCustom(): JSX.Element { + const chartRef = useRef(null); + + return ( +
+ + + Individual Income Taxes + ($2.4T) + + + chartRef.current?.notifyResized()} + > + 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 +
+ +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/tooltip/placement/tsconfig.json b/samples/inputs/tooltip/custom/tsconfig.json similarity index 100% rename from samples/inputs/tooltip/placement/tsconfig.json rename to samples/inputs/tooltip/custom/tsconfig.json diff --git a/samples/inputs/tooltip/placement/vite.config.js b/samples/inputs/tooltip/custom/vite.config.js similarity index 100% rename from samples/inputs/tooltip/placement/vite.config.js rename to samples/inputs/tooltip/custom/vite.config.js diff --git a/samples/inputs/tooltip/overview/package.json b/samples/inputs/tooltip/overview/package.json index 795695786c..e44b72c241 100644 --- a/samples/inputs/tooltip/overview/package.json +++ b/samples/inputs/tooltip/overview/package.json @@ -1,6 +1,6 @@ { - "name": "react-button-overview", - "description": "This project provides example of Button Overview using Infragistics React components", + "name": "react-tooltip-overview", + "description": "This project provides an example of Tooltip overview using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/tooltip/overview/src/index.css b/samples/inputs/tooltip/overview/src/index.css index 5f4160679c..5f527d38f9 100644 --- a/samples/inputs/tooltip/overview/src/index.css +++ b/samples/inputs/tooltip/overview/src/index.css @@ -1,6 +1,31 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-avatar { - --ig-size: var(--ig-size-medium); -} \ No newline at end of file +.sample { + 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 igc-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/samples/inputs/tooltip/overview/src/index.tsx b/samples/inputs/tooltip/overview/src/index.tsx index b7deaaf9f0..4d7878067c 100644 --- a/samples/inputs/tooltip/overview/src/index.tsx +++ b/samples/inputs/tooltip/overview/src/index.tsx @@ -1,28 +1,70 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrAvatar, IgrTooltip } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; +import React, { useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio, IgrRadioGroup, IgrSwitch, IgrTooltip } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class TooltipOverview extends React.Component { - constructor(props: any) { - super(props); - } +type TooltipPlacement = 'top' | 'right' | 'left' | 'bottom'; + +const placements: { label: string; value: TooltipPlacement }[] = [ + { label: 'Top', value: 'top' }, + { label: 'Right', value: 'right' }, + { label: 'Left', value: 'left' }, + { label: 'Bottom', value: 'bottom' }, +]; + +export default function TooltipOverview(): JSX.Element { + const [placement, setPlacement] = useState('bottom'); + const [closeButton, setCloseButton] = useState(true); + const [arrow, setArrow] = useState(true); - public render(): JSX.Element { return ( -
- - - Her name is Madelyn James - -
+
+
+ + {placements.map((item) => ( + e.detail.checked && setPlacement(item.value)} + > + {item.label} + + ))} + + setCloseButton(e.detail.checked)} + > + Close Button + + setArrow(e.detail.checked)} + > + Arrow + +
+
+ + This is a tooltip message +
+ Multiline message here. + +
); - } } // rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/tooltip/placement/src/index.css b/samples/inputs/tooltip/placement/src/index.css deleted file mode 100644 index 89e8adbb2c..0000000000 --- a/samples/inputs/tooltip/placement/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -#tooltip-position { - margin: 40px 0 0 120px; - width: 400px; - height: 120px; -} - -igc-button::part(base) { - height: 100%; - border-radius: 0.5rem; -} \ No newline at end of file diff --git a/samples/inputs/tooltip/placement/src/index.tsx b/samples/inputs/tooltip/placement/src/index.tsx deleted file mode 100644 index 4f0d6c9c01..0000000000 --- a/samples/inputs/tooltip/placement/src/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrButton, IgrTooltip } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -type PopoverPlacement = - | "top" - | "top-start" - | "top-end" - | "bottom" - | "bottom-start" - | "bottom-end" - | "right" - | "right-start" - | "right-end" - | "left" - | "left-start" - | "left-end"; - -export default class TooltipPlacement extends React.Component { - constructor(props: any) { - super(props); - } - - Positions = ["top", "bottom", "left", "right"].flatMap((each) => [ - each, - `${each}-start`, - `${each}-end`, - ]) as Array; - - public render(): JSX.Element { - return ( -
- Click to trigger all supported placements - - - {this.Positions.map((pos) => ( - -
- {pos} -
- - ))} -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); diff --git a/samples/inputs/tooltip/rich/.devcontainer/devcontainer.json b/samples/inputs/tooltip/position/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/tooltip/rich/.devcontainer/devcontainer.json rename to samples/inputs/tooltip/position/.devcontainer/devcontainer.json diff --git a/samples/inputs/tooltip/rich/.eslintrc.js b/samples/inputs/tooltip/position/.eslintrc.js similarity index 100% rename from samples/inputs/tooltip/rich/.eslintrc.js rename to samples/inputs/tooltip/position/.eslintrc.js diff --git a/samples/inputs/tooltip/advanced/README.md b/samples/inputs/tooltip/position/README.md similarity index 91% rename from samples/inputs/tooltip/advanced/README.md rename to samples/inputs/tooltip/position/README.md index 32f43fab3f..ec18004ade 100644 --- a/samples/inputs/tooltip/advanced/README.md +++ b/samples/inputs/tooltip/position/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Advanced feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Position feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Advance View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/inputs/tooltip/advanced +cd ./samples/inputs/tooltip/position ``` open above folder in VS Code or type: diff --git a/samples/inputs/tooltip/advanced/index.html b/samples/inputs/tooltip/position/index.html similarity index 87% rename from samples/inputs/tooltip/advanced/index.html rename to samples/inputs/tooltip/position/index.html index 0fafc6c039..deaf5f22e0 100644 --- a/samples/inputs/tooltip/advanced/index.html +++ b/samples/inputs/tooltip/position/index.html @@ -1,7 +1,7 @@ - Tooltip Advanced + Tooltip Position diff --git a/samples/inputs/tooltip/placement/package.json b/samples/inputs/tooltip/position/package.json similarity index 87% rename from samples/inputs/tooltip/placement/package.json rename to samples/inputs/tooltip/position/package.json index 795695786c..c13406b008 100644 --- a/samples/inputs/tooltip/placement/package.json +++ b/samples/inputs/tooltip/position/package.json @@ -1,6 +1,6 @@ { - "name": "react-button-overview", - "description": "This project provides example of Button Overview using Infragistics React components", + "name": "react-tooltip-position", + "description": "This project provides an example of Tooltip position using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/tooltip/rich/sandbox.config.json b/samples/inputs/tooltip/position/sandbox.config.json similarity index 100% rename from samples/inputs/tooltip/rich/sandbox.config.json rename to samples/inputs/tooltip/position/sandbox.config.json diff --git a/samples/inputs/tooltip/position/src/index.css b/samples/inputs/tooltip/position/src/index.css new file mode 100644 index 0000000000..9ae4e37635 --- /dev/null +++ b/samples/inputs/tooltip/position/src/index.css @@ -0,0 +1,29 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + 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; +} + +igc-tooltip { + pointer-events: none; +} diff --git a/samples/inputs/tooltip/position/src/index.tsx b/samples/inputs/tooltip/position/src/index.tsx new file mode 100644 index 0000000000..6846ecd801 --- /dev/null +++ b/samples/inputs/tooltip/position/src/index.tsx @@ -0,0 +1,45 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTooltip } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const blockEscape = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + event.stopImmediatePropagation(); + } +}; + +export default function TooltipPosition(): JSX.Element { + useEffect(() => { + window.addEventListener('keydown', blockEscape, true); + return () => window.removeEventListener('keydown', blockEscape, true); + }, []); + + return ( +
+
+
+
+ +
+
+ + Tooltip message Top + + + Tooltip message Left + + + Tooltip message Right + + + Tooltip message Bottom + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/tooltip/rich/tsconfig.json b/samples/inputs/tooltip/position/tsconfig.json similarity index 100% rename from samples/inputs/tooltip/rich/tsconfig.json rename to samples/inputs/tooltip/position/tsconfig.json diff --git a/samples/inputs/tooltip/rich/vite.config.js b/samples/inputs/tooltip/position/vite.config.js similarity index 100% rename from samples/inputs/tooltip/rich/vite.config.js rename to samples/inputs/tooltip/position/vite.config.js diff --git a/samples/inputs/tooltip/rich/src/index.css b/samples/inputs/tooltip/rich/src/index.css deleted file mode 100644 index 80f25dbbea..0000000000 --- a/samples/inputs/tooltip/rich/src/index.css +++ /dev/null @@ -1,33 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-icon:hover { - cursor: pointer; - color: var(--ig-primary-500); -} - -.map { - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - width: 250px; - height: 272px; - background-image: url("https://dl.infragistics.com/x/img/card/media/infragisticsMap.png"); - border: 1px solid var(--ig-gray-300); -} - -.locationTooltipContent { - display: flex; - justify-content: center; - align-items: center; -} - -.logo { - margin-right: 10px; - width: 45px; -} - -igc-tooltip::part(base) { - max-width: 240px; -} \ No newline at end of file diff --git a/samples/inputs/tooltip/rich/src/index.tsx b/samples/inputs/tooltip/rich/src/index.tsx deleted file mode 100644 index 929e7c281a..0000000000 --- a/samples/inputs/tooltip/rich/src/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrAvatar, IgrTooltip, IgrIcon, registerIconFromText } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -const location = - ''; - -registerIconFromText("location_on", location, "material"); - -export default class TooltipRich extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- - -
- -
-
Infragistics Inc. HQ
-
2 Commerce Dr, Cranbury, NJ 08512, USA
-
-
- -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); diff --git a/samples/inputs/tooltip/styling/package.json b/samples/inputs/tooltip/styling/package.json index 795695786c..88975f33a9 100644 --- a/samples/inputs/tooltip/styling/package.json +++ b/samples/inputs/tooltip/styling/package.json @@ -1,6 +1,6 @@ { - "name": "react-button-overview", - "description": "This project provides example of Button Overview using Infragistics React components", + "name": "react-tooltip-styling", + "description": "This project provides an example of Tooltip styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/tooltip/styling/src/Styling.css b/samples/inputs/tooltip/styling/src/Styling.css deleted file mode 100644 index 945e74afc1..0000000000 --- a/samples/inputs/tooltip/styling/src/Styling.css +++ /dev/null @@ -1,8 +0,0 @@ -igc-tooltip::part(base) { - background-color: var(--ig-primary-300); - color: var(--ig-primary-300-contrast); -} - -igc-tooltip::part(bottom) { - border-bottom-color: var(--ig-primary-300); -} \ No newline at end of file diff --git a/samples/inputs/tooltip/styling/src/index.css b/samples/inputs/tooltip/styling/src/index.css index 5f4160679c..14b0fc9f9d 100644 --- a/samples/inputs/tooltip/styling/src/index.css +++ b/samples/inputs/tooltip/styling/src/index.css @@ -1,6 +1,67 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-avatar { - --ig-size: var(--ig-size-medium); -} \ No newline at end of file +.sample { + 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 igc-list-item { + padding: 0.5rem 1rem; +} + +.avatar { + position: relative; + display: flex; +} + +.avatar igc-badge { + position: absolute; + right: -0.3125rem; + bottom: -0.3125rem; +} + +.avatar igc-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); +} + +.status-tooltip::part(base) { + width: 12.5rem; + padding: 0.1875rem 0.5rem; +} + +.status-tooltip igc-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/samples/inputs/tooltip/styling/src/index.tsx b/samples/inputs/tooltip/styling/src/index.tsx index 2e04153f3e..8d0db1cb29 100644 --- a/samples/inputs/tooltip/styling/src/index.tsx +++ b/samples/inputs/tooltip/styling/src/index.tsx @@ -1,30 +1,58 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./Styling.css"; -import "./index.css"; -import { IgrAvatar, IgrTooltip } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrAvatar, + IgrBadge, + IgrDatePicker, + IgrIcon, + IgrList, + IgrListItem, + IgrTooltip, + registerIconFromText, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/material.css'; -export default class TooltipStyling extends React.Component { - constructor(props: any) { - super(props); - } +const blockIcon = ''; - public render(): JSX.Element { +registerIconFromText('block', blockIcon, 'material'); + +export default function TooltipStyling(): JSX.Element { return ( -
- - - Her name is Madelyn James - -
+
+ + +
+ + + + +
+ Aron Watson + + + + + + My notifications are silenced to focus. Urgent matters only, please, + otherwise I'll reply when I'm free. + + + + +
); - } } // rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); - +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/tooltip/triggers/.devcontainer/devcontainer.json b/samples/inputs/tooltip/tailwind-styling/.devcontainer/devcontainer.json similarity index 100% rename from samples/inputs/tooltip/triggers/.devcontainer/devcontainer.json rename to samples/inputs/tooltip/tailwind-styling/.devcontainer/devcontainer.json diff --git a/samples/inputs/tooltip/triggers/.eslintrc.js b/samples/inputs/tooltip/tailwind-styling/.eslintrc.js similarity index 100% rename from samples/inputs/tooltip/triggers/.eslintrc.js rename to samples/inputs/tooltip/tailwind-styling/.eslintrc.js diff --git a/samples/inputs/tooltip/tailwind-styling/README.md b/samples/inputs/tooltip/tailwind-styling/README.md new file mode 100644 index 0000000000..a91b221034 --- /dev/null +++ b/samples/inputs/tooltip/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/tooltip/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/tooltip/tailwind-styling/index.html b/samples/inputs/tooltip/tailwind-styling/index.html new file mode 100644 index 0000000000..669527adc3 --- /dev/null +++ b/samples/inputs/tooltip/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Tooltip Tailwind Styling + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/tooltip/tailwind-styling/package.json b/samples/inputs/tooltip/tailwind-styling/package.json new file mode 100644 index 0000000000..0729b5e8a5 --- /dev/null +++ b/samples/inputs/tooltip/tailwind-styling/package.json @@ -0,0 +1,45 @@ +{ + "name": "react-tooltip-tailwind-styling", + "description": "This project provides an example of Tooltip tailwind styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.9.0", + "igniteui-react-charts": "19.6.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.4.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.14", + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "tailwindcss": "^4.1.14", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/tooltip/triggers/sandbox.config.json b/samples/inputs/tooltip/tailwind-styling/sandbox.config.json similarity index 100% rename from samples/inputs/tooltip/triggers/sandbox.config.json rename to samples/inputs/tooltip/tailwind-styling/sandbox.config.json diff --git a/samples/inputs/tooltip/tailwind-styling/src/index.css b/samples/inputs/tooltip/tailwind-styling/src/index.css new file mode 100644 index 0000000000..aca623601c --- /dev/null +++ b/samples/inputs/tooltip/tailwind-styling/src/index.css @@ -0,0 +1,19 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@import url("https://use.typekit.net/bng2zgw.css"); +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +@theme { + --color-btc-ink: #00142b; + --color-btc-text: #212121; + --color-btc-muted: #616161; + --color-btc-border: #e0e0e0; + --color-btc-icon: #f95924; + --color-btc-exchange: #e04f1f; + --color-btc-accent: #0176ff; + --color-chart-border: #d2dbe8; +} diff --git a/samples/inputs/tooltip/tailwind-styling/src/index.tsx b/samples/inputs/tooltip/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..0f2fc641b7 --- /dev/null +++ b/samples/inputs/tooltip/tailwind-styling/src/index.tsx @@ -0,0 +1,150 @@ +import React, { useRef } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrIcon, IgrList, IgrListItem, IgrTooltip, registerIconFromText } from 'igniteui-react'; +import { + IgrCategoryChart, + IgrCategoryChartModule, + IgrPieChart, + IgrPieChartModule, +} from 'igniteui-react-charts'; +import 'igniteui-webcomponents/themes/light/material.css'; + +IgrCategoryChartModule.register(); +IgrPieChartModule.register(); + +const bitcoinIcon = ''; + +registerIconFromText('bitcoin', bitcoinIcon, 'material'); + +const portfolio = [ + { asset: 'Bitcoin', share: 56 }, + { asset: 'Ethereum', share: 24 }, + { asset: 'Other', share: 20 }, +]; + +const 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 }, +]; + +export default function TooltipTailwindStyling(): JSX.Element { + const chartRef = useRef(null); + const portfolioTooltipRef = useRef(null); + + const showPortfolioTooltip = async () => { + await portfolioTooltipRef.current?.show(); + chartRef.current?.notifyResized(); + }; + + const hidePortfolioTooltip = () => portfolioTooltipRef.current?.hide(); + + return ( +
+
+ + + + + BTC + + + Daily: + 2,6% + + + + +
+ + BTC + + + + Exchange Balance + USD 81,459.00 + + + Assets Balance + USD 46,287.90 + +
+ +
+ + +
+ +
+ +
+ +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/tooltip/triggers/tsconfig.json b/samples/inputs/tooltip/tailwind-styling/tsconfig.json similarity index 100% rename from samples/inputs/tooltip/triggers/tsconfig.json rename to samples/inputs/tooltip/tailwind-styling/tsconfig.json diff --git a/samples/inputs/tooltip/tailwind-styling/vite.config.js b/samples/inputs/tooltip/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..4043727956 --- /dev/null +++ b/samples/inputs/tooltip/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build', + }, + server: { + open: false, + }, +}); diff --git a/samples/inputs/tooltip/triggers/src/index.css b/samples/inputs/tooltip/triggers/src/index.css deleted file mode 100644 index ee8ecd81f4..0000000000 --- a/samples/inputs/tooltip/triggers/src/index.css +++ /dev/null @@ -1,29 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -#triggers-container { - display: flex; - flex-wrap: wrap; - align-content: space-between; - gap: 0.6rem; - - & igc-card { - max-width: 320px; - } - - & igc-card-header { - min-height: 3rem; - } - - & igc-card-content { - display: flex; - height: 100%; - flex-direction: column; - gap: 0.5rem; - justify-content: space-between; - } -} - -.sample { - padding: 0.5rem 0rem 0rem 0.5rem; -} \ No newline at end of file diff --git a/samples/inputs/tooltip/triggers/src/index.tsx b/samples/inputs/tooltip/triggers/src/index.tsx deleted file mode 100644 index b7ab241770..0000000000 --- a/samples/inputs/tooltip/triggers/src/index.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import { IgrTooltip, IgrButton, IgrInput, IgrCard, IgrCardContent, IgrCardHeader } from "igniteui-react"; -import "igniteui-webcomponents/themes/light/bootstrap.css"; - -export default class TooltipTriggers extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- - -

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. -

- - Hover over me - - - I am show 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. -

- - Focus me - - - 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. -

- - Click - - - I am show 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 akeypress or blur. -

-

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

- - Press 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! - - - -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); diff --git a/samples/inputs/tooltip/variants/.devcontainer/devcontainer.json b/samples/inputs/tooltip/variants/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/tooltip/variants/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/tooltip/variants/.eslintrc.js b/samples/inputs/tooltip/variants/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/tooltip/variants/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/tooltip/triggers/README.md b/samples/inputs/tooltip/variants/README.md similarity index 91% rename from samples/inputs/tooltip/triggers/README.md rename to samples/inputs/tooltip/variants/README.md index 3a14068675..ef102f3a01 100644 --- a/samples/inputs/tooltip/triggers/README.md +++ b/samples/inputs/tooltip/variants/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Triggers feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Variants feature using [Tooltip](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Trigger View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/inputs/tooltip/triggers +cd ./samples/inputs/tooltip/variants ``` open above folder in VS Code or type: diff --git a/samples/inputs/tooltip/triggers/index.html b/samples/inputs/tooltip/variants/index.html similarity index 87% rename from samples/inputs/tooltip/triggers/index.html rename to samples/inputs/tooltip/variants/index.html index 9ca49cc3cf..381b1d69aa 100644 --- a/samples/inputs/tooltip/triggers/index.html +++ b/samples/inputs/tooltip/variants/index.html @@ -1,7 +1,7 @@ - Tooltip Triggers + Tooltip Variants diff --git a/samples/inputs/tooltip/triggers/package.json b/samples/inputs/tooltip/variants/package.json similarity index 87% rename from samples/inputs/tooltip/triggers/package.json rename to samples/inputs/tooltip/variants/package.json index 795695786c..c72bb93024 100644 --- a/samples/inputs/tooltip/triggers/package.json +++ b/samples/inputs/tooltip/variants/package.json @@ -1,6 +1,6 @@ { - "name": "react-button-overview", - "description": "This project provides example of Button Overview using Infragistics React components", + "name": "react-tooltip-variants", + "description": "This project provides an example of Tooltip variants using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/inputs/tooltip/variants/sandbox.config.json b/samples/inputs/tooltip/variants/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/tooltip/variants/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/tooltip/variants/src/index.css b/samples/inputs/tooltip/variants/src/index.css new file mode 100644 index 0000000000..948fe24716 --- /dev/null +++ b/samples/inputs/tooltip/variants/src/index.css @@ -0,0 +1,25 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + 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/samples/inputs/tooltip/variants/src/index.tsx b/samples/inputs/tooltip/variants/src/index.tsx new file mode 100644 index 0000000000..8ab95ba011 --- /dev/null +++ b/samples/inputs/tooltip/variants/src/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTooltip } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function TooltipVariants(): JSX.Element { + return ( +
+
+
+
+
+
+
+ + Tooltip message + + + Tooltip message + + + Tooltip message + + + Tooltip message + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/tooltip/variants/tsconfig.json b/samples/inputs/tooltip/variants/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/tooltip/variants/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/tooltip/triggers/vite.config.js b/samples/inputs/tooltip/variants/vite.config.js similarity index 100% rename from samples/inputs/tooltip/triggers/vite.config.js rename to samples/inputs/tooltip/variants/vite.config.js From 872b4fe9a1ac1f34e019be81ae1a5f9a223564a1 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 20 Oct 2026 15:05:57 +0300 Subject: [PATCH 2/3] fix(tooltip): update styling picture --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/tooltip/styling/src/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index e4dae66144..1efdf6df73 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-10-16 18:26:55","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-10-20 15:03:56","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index e4dae66144..1efdf6df73 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-10-16 18:26:55","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-10-20 15:03:56","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/tooltip/styling/src/index.tsx b/samples/inputs/tooltip/styling/src/index.tsx index 8d0db1cb29..d9411197f4 100644 --- a/samples/inputs/tooltip/styling/src/index.tsx +++ b/samples/inputs/tooltip/styling/src/index.tsx @@ -24,7 +24,7 @@ export default function TooltipStyling(): JSX.Element {
From 89748a304c43fe14b1f95425e100999dc3a30e30 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Fri, 23 Oct 2026 17:42:47 +0300 Subject: [PATCH 3/3] fix(tooltip): update tailwind sample --- samples/inputs/tooltip/tailwind-styling/src/index.css | 2 +- samples/inputs/tooltip/tailwind-styling/src/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/inputs/tooltip/tailwind-styling/src/index.css b/samples/inputs/tooltip/tailwind-styling/src/index.css index aca623601c..010adf9831 100644 --- a/samples/inputs/tooltip/tailwind-styling/src/index.css +++ b/samples/inputs/tooltip/tailwind-styling/src/index.css @@ -1,8 +1,8 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -@import url("https://use.typekit.net/bng2zgw.css"); @layer theme, base, components, utilities; +@import url("https://use.typekit.net/bng2zgw.css"); @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); @source "./index.tsx"; diff --git a/samples/inputs/tooltip/tailwind-styling/src/index.tsx b/samples/inputs/tooltip/tailwind-styling/src/index.tsx index d4c85fa84f..b3b87090d3 100644 --- a/samples/inputs/tooltip/tailwind-styling/src/index.tsx +++ b/samples/inputs/tooltip/tailwind-styling/src/index.tsx @@ -48,7 +48,7 @@ export default function TooltipTailwindStyling() { return (
-
+