Skip to content

Add Tooltip component#1621

Merged
rkaraivanov merged 74 commits intomasterfrom
rkaraivanov/tooltip
Apr 23, 2025
Merged

Add Tooltip component#1621
rkaraivanov merged 74 commits intomasterfrom
rkaraivanov/tooltip

Conversation

@RivaIvanova
Copy link
Copy Markdown
Member

@RivaIvanova RivaIvanova commented Mar 26, 2025

Closes #1615

rkaraivanov and others added 10 commits March 18, 2025 14:42
@rkaraivanov
feat: Added tooltip component
d48bff7 
PoC implementation
@Zneeky
feat(tooltip): Add show and hide delay properties with event handling
94b25ed
@Zneeky
feat(tooltip): Add toggle method for showing/hiding tooltip with butt…
c3d45f0 
…on interaction
@Zneeky
feat(tooltip): Add message property for plain text tooltip content
c7c4182
@Zneeky
feat(tooltip): Enhance accessibility with ARIA attributes for tooltip…
8ae5c7e 
… component
@Zneeky
feat(tooltip): Refactor show and hide methods to use a delay helper f…
5273de2 
…unction
@Zneeky
feat(animation): Add scaleInCenter animation
c8584b9
@Zneeky
fix(tooltip): restore pointerEnter event for tooltip
fb87359
@Zneeky
fix(tooltip): correct tooltip visibility state management for fadeOut…
14f798a 
… animation
@Zneeky
feat(tooltip): enhance toggle animation with customizable duration an…
3baadca 
…d easing functions
Zneeky and others added 16 commits March 26, 2025 17:14
@Zneeky
fix(tooltip): rename internal flags for clarity and enhance accessibi…
a95ca8d 
…lity attributes, also add a timeout before calling hideWithEvent
@Zneeky
Merge branch 'rkaraivanov/tooltip' into aahmedov/add-tooltip-web-comp…
7af8977 
…onents
@Zneeky
feat(tooltip): enhance tooltip parameters and add new properties to s…
6eab574 
…tories
@Zneeky
Merge branch 'aahmedov/add-tooltip-web-components' into rkaraivanov/t…
699906e 
…ooltip
@RivaIvanova
Merge branch 'master' into rkaraivanov/tooltip
95c36a3
@Zneeky
fix(tooltip): simplify event handling and fix tests
31245b7
@Zneeky
refactor(tooltip): streamline tooltip show/hide logic and remove unus…
785706b 
…ed state flags
@rkaraivanov
Merge branch 'master' into rkaraivanov/tooltip
fc3c187
@rkaraivanov
fix(popover): Arrow placement middleware styles
5d6701a
@RivaIvanova
test(tooltip): add tests for sticky and message properties
81699f3
@Zneeky
feat(tooltip): add sticky mode for persistent visibility and a close …
963d05c 
…button slot
@Zneeky
Merge branch 'rkaraivanov/tooltip' into aahmedov/tooltip-enhancements
366f6a7
@didimmova
styles(tooltip): add initial styles for the tooltip
6256340
@rkaraivanov
refactor: Popover arrow parts & tooltip service
bfecb5b
@rkaraivanov
Merge remote-tracking branch 'origin/rkaraivanov/tooltip' into rkarai…
48c105c 
…vanov/tooltip
@Zneeky
fix(tooltip): update default offset to 6 and adjust sticky property r…
3a7464b 
…eflection
@rkaraivanov
refactor: Tooltip controller
3d166ea 
Code restructure and internal event listeners state
are now handled with AbortController
@rkaraivanov rkaraivanov marked this pull request as ready for review April 15, 2025 10:27
@dkoleva-infra
Copy link
Copy Markdown

dkoleva-infra commented Apr 16, 2025

@rkaraivanov

For all themes dark & white:

Fluent:
line-height: 20px (should be 16px); /now used some ig-body2-line-height var)
height: 26px; (should be 24px);
padding-top, padding-bottom: 3px (should be 4px);

Bootstrap:
line-height: 21px (should be 16px); /now used some ig-body2-line-height var);
height: 24px; (now is 27px);
padding-top, padding-bottom: 3px (should be 4px);

Material:
line-height: 20px (should be 16px); /now used some ig-body2-line-height var);
height: 26px; (should be 24px);
padding-top, padding-bottom: 3px (should be 4px);
letter-spacing: 0.25px (should be 0.33px);

Indigo:
height: 22px; (should be 24px);
padding-top, padding-bottom: 3px (should be 4px);
font-size: 10px (should be 12px);
shadow: no shadow (Elevations/Shadow 08);

@rkaraivanov
Copy link
Copy Markdown
Member

rkaraivanov commented Apr 16, 2025

@didimmova

@rkaraivanov

For all themes dark & white:

Fluent: line-height: 20px (should be 16px); /now used some ig-body2-line-height var) height: 26px; (should be 24px); padding-top, padding-bottom: 3px (should be 4px);

Bootstrap: line-height: 21px (should be 16px); /now used some ig-body2-line-height var); height: 24px; (now is 27px); padding-top, padding-bottom: 3px (should be 4px);

Material: line-height: 20px (should be 16px); /now used some ig-body2-line-height var); height: 26px; (should be 24px); padding-top, padding-bottom: 3px (should be 4px); letter-spacing: 0.25px (should be 0.33px);

Indigo: height: 22px; (should be 24px); padding-top, padding-bottom: 3px (should be 4px); font-size: 10px (should be 12px); shadow: no shadow (Elevations/Shadow 08);

didimmova and others added 7 commits April 16, 2025 16:06
@didimmova
styles(tooltip): refactor styles
3ed7642
@didimmova
styles(tooltip): use subtitle-2 type style for indigo
de0120a
@Zneeky
refactor(tooltip): reset transient anchor to the default anchor value
e9bc714 
* Introduces a private `_defaultAnchor` variable to store the initial anchor.
  This value is set via `resolveAnchor`, which is triggered by
  `hostConnected` or when the host's `anchor` property changes. This ensures there is a reference to the host's current anchor element.

* When the tooltip is closed and the current anchor is transient, the anchor is set back to `_defaultAnchor`.

* Updates the test to check for proper anchor reset
@Zneeky
Merge branch 'rkaraivanov/tooltip' of https://github.com/IgniteUI/ign…
776dc8d 
…iteui-webcomponents into rkaraivanov/tooltip
@rkaraivanov
Merge branch 'master' into rkaraivanov/tooltip
f053392
@didimmova
feat(tooltip): switch content alignment to be flex-start
105d6e7
@rkaraivanov
refactor(tooltip): Anchor targets as weak refs
7c027ff 
* Anchor event listeners as wrapped weak references.
* `show` method now accepts an IDREF in addition to the element reference.
* Some code reorganization.
* Included the tooltip component inside the `defineAllComponents` collection.
@dkoleva-infra
Copy link
Copy Markdown

dkoleva-infra commented Apr 17, 2025

The text & icon in a sticky tooltip should be top-aligned.
Sticky_Tooltip

@rkaraivanov rkaraivanov merged commit 40e13e2 into master Apr 23, 2025
5 checks passed
@rkaraivanov rkaraivanov deleted the rkaraivanov/tooltip branch April 23, 2025 08:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rkaraivanov rkaraivanov rkaraivanov approved these changes

Assignees

@dkoleva-infra dkoleva-infra

Labels

design: verified tooltip ✅ status: verified

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Tooltip Component

7 participants

@RivaIvanova @dkoleva-infra @rkaraivanov @sdimchevski @didimmova @Zneeky @simeonoff