Skip to content

Add Tooltip component #1621

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

Jump to bottom
Open
wants to merge 71 commits into
base: master
Choose a base branch
from
Open

Add Tooltip component #1621

wants to merge 71 commits into from

Conversation

RivaIvanova
Copy link
Member

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

@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
Member

@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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rkaraivanov rkaraivanov rkaraivanov requested changes

Requested changes must be addressed to merge this pull request.

Assignees

@dkoleva-infra dkoleva-infra

Labels
design: verified tooltip ❌ status: awaiting-test
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