Skip to content

feat(tooltip): add advanced sample #1023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 21, 2025
+982 −0
Merged

feat(tooltip): add advanced sample #1023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
307a78b
feat(tooltip): add advanced sample
adrianptrv Jul 24, 2025
2ff7ddb
chore(tooltip): remove empty space + old comments
adrianptrv Jul 24, 2025
5c397bf
fix(tooltip): new design changes to the advanced sample
adrianptrv Jul 25, 2025
620e8a3
feat(tooltip): update advanced sample to latest design + format
adrianptrv Jul 31, 2025
307558a
fix(tooltip): 4th & 6th tooltip widths
adrianptrv Aug 5, 2025
f99143b
Merge branch 'vnext' into apetrov/add-tooltip-advanced-sample
simeonoff Aug 18, 2025
7a63309
chore(tooltip): remove styling comments
adrianptrv Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions browser/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -968,6 +968,7 @@
</div>
<label id="nav-tooltip" class="nav-component">Tooltip</label>
<div id="nav-tooltip-list" class="nav-list" state="collapsed">
<a class="nav-link" href="#" data-nav="/samples/inputs/tooltip/advanced">─<span>Advanced</span></a>
<a class="nav-link" href="#" data-nav="/samples/inputs/tooltip/overview">─<span>Overview</span></a>
<a class="nav-link" href="#" data-nav="/samples/inputs/tooltip/placement">─<span>Placement</span></a>
<a class="nav-link" href="#" data-nav="/samples/inputs/tooltip/rich">─<span>Rich</span></a>
Expand Down Expand Up @@ -1169,6 +1170,14 @@
<a class="nav-link" href="#" data-nav="/samples/scheduling/date-picker/overview">─<span>Overview</span></a>
<a class="nav-link" href="#" data-nav="/samples/scheduling/date-picker/styling">─<span>Styling</span></a>
</div>
<label id="nav-date-range-picker" class="nav-component">Date Range Picker</label>
<div id="nav-date-range-picker-list" class="nav-list" state="collapsed">
<a class="nav-link" href="#" data-nav="/samples/scheduling/date-range-picker/custom-ranges">─<span>Custom Ranges</span></a>
<a class="nav-link" href="#" data-nav="/samples/scheduling/date-range-picker/form">─<span>Form</span></a>
<a class="nav-link" href="#" data-nav="/samples/scheduling/date-range-picker/overview">─<span>Overview</span></a>
<a class="nav-link" href="#" data-nav="/samples/scheduling/date-range-picker/slots">─<span>Slots</span></a>
<a class="nav-link" href="#" data-nav="/samples/scheduling/date-range-picker/styling">─<span>Styling</span></a>
</div>



Expand Down
56 changes: 56 additions & 0 deletions samples/inputs/tooltip/advanced/ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->

This folder contains implementation of Web Components application with example of Advanced feature using [Tooltip](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
</a>
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
</a>
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/tooltip/advanced" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
</a>
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/tooltip/advanced?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
</a>
</body>
</html>

## Branches

> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.

## Instructions

To set up this project locally, execute these commands:

```
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
git checkout master
cd ./igniteui-wc-examples
cd ./samples/inputs/tooltip/advanced
```

open above folder in VS Code or type:
```
code .
```

In terminal window, run:

```
npm install
npm run start
```

Then open http://localhost:4200/ in your browser


## Learn More

To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
194 changes: 194 additions & 0 deletions samples/inputs/tooltip/advanced/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html>

<head>
<title>Advanced Tooltips</title>
<meta charset="UTF-8" />

<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
<div id="root">
<div class="container sample center">
<igc-card class="triggerWrapper">
<igc-card-header>
<p slot="title">Containing list</p>
</igc-card-header>
<igc-list class="trigger" id="trigger1">
<igc-list-item>
<p slot="start">Credits</p>
<span slot="end">($2.4T)</span>
</igc-list-item>
</igc-list>
</igc-card>
<igc-tooltip class="list" anchor="trigger1" placement="bottom" hide-delay="0" show-delay="0">
<igc-list>
<h6>Credits</h6>
<igc-list-item><igc-icon name="dollar"></igc-icon>Amount - 1,678,345</igc-list-item>
<div class="toolsWrapper">
<igc-list-header>Tools</igc-list-header>
<igc-list-item><igc-icon name="filter"></igc-icon>Filter</igc-list-item>
<igc-list-item><igc-icon name="link"></igc-icon>Retail Banking</igc-list-item>
<igc-list-item><igc-icon name="info"></igc-icon>More Info</igc-list-item>
</div>
</igc-list>
</igc-tooltip>
<igc-card class="triggerWrapper">
<igc-card-header>
<h3 slot="title">Containing chart</h3>
</igc-card-header>
<igc-list class="trigger" id="trigger2">
<igc-list-item>
<p slot="start">Individual Income Taxes</p>
<span slot="end">($2.4T)</span>
</igc-list-item>
</igc-list>
</igc-card>
<igc-tooltip class="chart" anchor="trigger2" placement="bottom" hide-delay="0" show-delay="0" >
<h6>Individual Income Taxes</h6>
<igc-category-chart name="chart" id="chart" chart-type="SplineArea" included-properties="year, revenue"
y-axis-title="IFT" y-axis-title-left-margin="10" y-axis-title-right-margin="5"
y-axis-label-left-margin="0" marker-types="none" tool-tip-type="none" is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
</igc-category-chart>
<p class="content">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).</p>
</igc-tooltip>
<igc-card class="triggerWrapper">
<igc-card-header>
<h3 slot="title">Containing badge</h3>
</igc-card-header>
<igc-list class="trigger" id="trigger3">
<igc-list-item>
<div class="avatarWrapper" slot="start">
<igc-avatar id="avatar" src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
shape="circle">
</igc-avatar>
<igc-badge>
<igc-icon name="block"></igc-icon>
</igc-badge>
</div>
<p slot="title">Eliza Morales</p>
</igc-list-item>
</igc-list>
</igc-card>
<igc-tooltip class="employee" anchor="trigger3" placement="bottom" hide-delay="0" show-delay="0">
<div class="avatarWrapper">
<igc-avatar id="avatar" src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
shape="circle">
</igc-avatar>
<igc-badge>
<igc-icon name="block"></igc-icon>
</igc-badge>
</div>
<div class="textWrapper">
<h6>Eliza Morales</h6>
<p class="occupation">Software Engineer</p>
<p class="status">In a meeting</p>
<p class="availability">Available at 2:00 pm</p>
</div>
</igc-tooltip>
<igc-card class="triggerWrapper">
<igc-card-header>
<h3 slot="title">Containing icon</h3>
</igc-card-header>
<igc-list class="trigger" id="trigger4">
<igc-list-item>
<div class="avatarWrapper" slot="start">
<igc-avatar id="avatar" src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/5.jpg"
shape="circle">
</igc-avatar>
<igc-badge>
<igc-icon name="block"></igc-icon>
</igc-badge>
</div>
<p slot="title">Aron Watson</p>
</igc-list-item>
</igc-list>
</igc-card>
<igc-tooltip class="multiline" anchor="trigger4" placement="bottom" hide-delay="0" show-delay="0">
<igc-icon name="block"></igc-icon>
<p>Notifications are silenced while I focus. Please reach out only for urgent matters.</p>
</igc-tooltip>
<igc-card class="triggerWrapper">
<igc-card-header>
<h3 slot="title">Containing buttons</h3>
</igc-card-header>
<igc-list class="trigger" id="trigger5">
<igc-list-item>
<div class="headingWrapper" slot="start">
<igc-icon slot="start" name="btc"></igc-icon>
<h6 slot="title" class="heading">BTC</h6>
</div>
<p slot="end" class="secondary">Daily: + $45</p>
</igc-list-item>
</igc-list>
</igc-card>
<igc-tooltip class="btcBtn" anchor="trigger5" placement="bottom" hide-delay="0" show-delay="0">
<igc-card class="contentWrapper">
<div class="titleWrapper">
<h6>BTC</h6>
<igc-icon name="btc"></igc-icon>
</div>
<div class="exchangeWrapper">
<p class="detail">Exchange Balance</p>
<p class="subtitle">USD 356.12.45</p>
</div>
<div class="assetsWrapper">
<p class="detail">Assets Balance</p>
<p class="subtitle">USD 46.28.79</p>
</div>
</igc-card>
<div class="footerWrapper">
<igc-button variant="flat">Deposit</igc-button>
<igc-button variant="flat">Withdraw</igc-button>
</div>
</igc-tooltip>
<igc-card class="triggerWrapper">
<igc-card-header>
<h3 slot="title">Advanced sticky tooltip</h3>
</igc-card-header>
<igc-list class="trigger" id="trigger6">
<igc-list-item>
<div class="headingWrapper" slot="start">
<igc-icon slot="start" name="btc"></igc-icon>
<h6 slot="title" class="heading">BTC</h6>
</div>
<p slot="end" class="secondary">Daily: + 2,6%</p>
</igc-list-item>
</igc-list>
</igc-card>
<igc-tooltip class="btc" anchor="trigger6" sticky placement="bottom"
hide-delay="0" show-delay="0">
<igc-card class="contentWrapper">
<div class="titleWrapper">
<h6>BTC</h6>
<igc-icon name="btc"></igc-icon>
</div>
<div class="exchangeWrapper">
<p class="detail">Exchange Balance</p>
<p class="subtitle">USD 356.12.45</p>
</div>
<div class="assetsWrapper">
<p class="detail">Assets Balance</p>
<p class="subtitle">USD 46.28.79</p>
</div>
</igc-card>
</igc-tooltip>
</div>
</div>

<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>

</body>

</html>
60 changes: 60 additions & 0 deletions samples/inputs/tooltip/advanced/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
{
"name": "wc-tooltip-advanced",
"version": "1.0.0",
"description": "This project provides example of Snackbar Overview using IgniteUI for Web Components",
"main": "src/index.ts",
"scripts": {
"build": "npm run build:prod",
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
"start": "npm run serve:dev",
"build:legacy": "npm run build:prod:legacy",
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
"start:legacy": "npm run serve:dev:legacy"
},
"author": "Infragistics",
"dependencies": {
"@webcomponents/custom-elements": "^1.4.1",
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
"igniteui-webcomponents": "6.0.0",
"lit": "^3.2.0",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
"devDependencies": {
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/plugin-transform-class-properties": "^7.25.9",
"@babel/plugin-transform-class-static-block": "^7.26.0",
"@babel/plugin-transform-runtime": "^7.10.0",
"@babel/preset-env": "^7.8.3",
"@babel/preset-typescript": "^7.8.3",
"@types/source-map": "^0.5.7",
"babel-loader": "^8.1.0",
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"css-loader": "^1.0.0",
"csv-loader": "^3.0.2",
"file-loader": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^4.1.5",
"html-webpack-plugin": "^4.3.0",
"parcel-bundler": "^1.6.1",
"source-map": "^0.7.3",
"style-loader": "^0.22.1",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"typescript": "^4.4.4",
"webpack": "^5.96.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1",
"worker-loader": "^3.0.8",
"xml-loader": "^1.2.1"
},
"license": "",
"homepage": "."
}
7 changes: 7 additions & 0 deletions samples/inputs/tooltip/advanced/sandbox.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"infiniteLoopProtection": false,
"hardReloadOnChange": false,
"view": "browser",
"template": "parcel"
}

43 changes: 43 additions & 0 deletions samples/inputs/tooltip/advanced/src/IncomeTaxes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
export class IncomeTaxesItem {
public constructor(init: Partial<IncomeTaxesItem>) {
Object.assign(this, init);
}
public year: string;
public revenue: number;
}
export class IncomeTaxes extends Array<IncomeTaxesItem> {
public constructor(items: Array<IncomeTaxesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new IncomeTaxesItem(
{
year: `2021`,
revenue: 15
}),
new IncomeTaxesItem(
{
year: `2022`,
revenue: 30
}),
new IncomeTaxesItem(
{
year: `2023`,
revenue: 18
}),
new IncomeTaxesItem(
{
year: `2024`,
revenue: 30
}),
new IncomeTaxesItem(
{
year: `2025`,
revenue: 38
}),
];
super(...newItems.slice(0));
}
}
}
Loading