-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- 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(Containing list
-Credits
- ($2.4T) -Credits
-
- Tools
-
-
-
-
-
-
-
- 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
-
-
+
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
git clone https://github.com/IgniteUI/igniteui-react-examples.git
cd ./igniteui-react-examples
git checkout master
-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 @@
-
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+ {placements.map(({ label, value }) => {
+ const [side, alignment = 'center'] = value.split('-');
+
+ return (
+
+
+ {label}
+
+ );
+ })}
+
+
+
+
-
+
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
git clone https://github.com/IgniteUI/igniteui-react-examples.git
cd ./igniteui-react-examples
git checkout master
-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 @@
-
+
+
+ Individual Income Taxes
+ ($2.4T)
+
+
+ chartRef.current?.notifyResized()}
+ >
+ Individual Income Taxes
+
+
+
+
+
+
+
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+
+
+ 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
+
+
-
- Her name is Madelyn James
-
-
- );
+ const [placement, setPlacement] = useState
+
+ This is a tooltip message
+
+ Multiline message here. +
+
+ );
}
// rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(
+
+ {placements.map((item) => (
+ e.detail.checked && setPlacement(item.value)}
+ >
+ {item.label}
+
+ ))}
+
+ setCloseButton(e.detail.checked)}
+ >
+ Close Button
+
+ setArrow(e.detail.checked)}
+ >
+ Arrow
+
+
+
+ + Multiline message here. +
- Click to trigger all supported placements
-
-
- {Positions.map((pos) => (
-
-
- ))}
-
- );
-}
-
-// rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(
- {pos}
-
-
-
+
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
git clone https://github.com/IgniteUI/igniteui-react-examples.git
cd ./igniteui-react-examples
git checkout master
-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 message Top
+
+
+ Tooltip message Left
+
+
+ Tooltip message Right
+
+
+ Tooltip message Bottom
+
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+
+
+
+
+
+
-
- );
-}
-
-// rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(
-
-
-
-
-
-
-
- Infragistics Inc. HQ
- 2 Commerce Dr, Cranbury, NJ 08512, USA
-
-
- Her name is Madelyn James
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+ );
}
// rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(
+
+
+
+ Aron Watson
+ 
+
+
+
+
+
+
+
+
+
+
+## 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
+cd ./igniteui-react-examples
+git checkout master
+cd ./samples/inputs/tooltip/tailwind-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install
+npm 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 @@
+
+
+
+
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+
+
+
+
+
+
+
+
+
+
+
+
+ BTC
+
+
+
+
+
+
-
- );
-}
-
-// rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(
-
-
-
-
-
- Hover over me
-
-
- I am show on pointer enter and hidden on pointer leave and/or
- click.
-
-
-
-
-
-
-
-
-
- Focus me
-
-
- I am shown on focus and hidden on blur.
-
-
-
-
-
-
-
-
-
- Click
-
-
- I am show on click and will hide on anchor click.
-
-
-
-
-
-
-
-
-
- Press a key
-
-
- I am shown on a keypress and will hide on a keypress or blur.
-
-
-
-
-
-
-
-
-
- Value changed!
-
-
-
-
- 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. -
-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. -
-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. -
-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.
-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. -
-
-
+
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
git clone https://github.com/IgniteUI/igniteui-react-examples.git
cd ./igniteui-react-examples
git checkout master
-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 message
+
+
+ Tooltip message
+
+
+ Tooltip message
+
+
+ Tooltip message
+
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+
+
+
+
+
+