Skip to content

fix: #12246 - Tooltip. Add ability to enable tooltip only if element …#19337

Merged
cetincakiroglu merged 1 commit into
masterfrom
issue-12246
Jan 28, 2026
Merged

fix: #12246 - Tooltip. Add ability to enable tooltip only if element …#19337
cetincakiroglu merged 1 commit into
masterfrom
issue-12246

Conversation

@mehmetcetin01140

Copy link
Copy Markdown
Contributor

fixes #12246

@github-actions

Copy link
Copy Markdown

Thank you for your contribution! We will review your PR shortly. Please make sure to manually link it to an issue for proper tracking.

@github-actions

Copy link
Copy Markdown

AI Code Review

Changes Suggested

Summary

Adds a showOnEllipsis feature to the Tooltip component that conditionally displays tooltips only when text overflow occurs (ellipsis is active)

Issue Alignment

The implementation aligns with the requested feature to show tooltips only when element has overflow/ellipsis. The approach is straightforward and matches the example usage pattern from the issue.

Concerns

  • The hasEllipsis() method checks both offsetWidth/scrollWidth and offsetHeight/scrollHeight, but text ellipsis (text-overflow: ellipsis) typically only applies to horizontal overflow. Vertical overflow might give false positives.
  • The hasEllipsis() check happens on every activate() call. For dynamic content that changes size, this could be inefficient if called frequently (e.g., on mousemove).
  • No consideration for CSS properties that must be present for ellipsis to work (white-space: nowrap, overflow: hidden, text-overflow: ellipsis). The method will return false if these aren't set, but there's no warning to the developer.
  • Missing unit tests for the new functionality. This feature needs tests covering: tooltip shows with ellipsis, tooltip doesn't show without ellipsis, dynamic content changes.
  • Missing documentation update. The feature should be documented in the component's documentation/showcase examples.
  • The property name 'showOnEllipsis' might be misleading - it actually means 'showOnlyIfEllipsis' or 'showWhenOverflow'. Current name could imply it triggers on the ellipsis character itself.
  • No consideration for RTL (right-to-left) text direction, though the current implementation should work for both.

Suggestions

  • Consider renaming to 'showOnTextOverflow' or 'autoShow' with a value like 'overflow' to be more descriptive of the actual behavior.
  • Add a comment explaining that this requires specific CSS properties (overflow: hidden, text-overflow: ellipsis, white-space: nowrap) to work correctly.
  • Consider caching the ellipsis check result if the tooltip is activated multiple times without content/size changes to improve performance.
  • Add unit tests covering: (1) tooltip shows when text overflows, (2) tooltip doesn't show when text fits, (3) tooltip responds to dynamic size changes.
  • Update the component documentation with usage examples and required CSS properties.
  • Consider adding a console warning in development mode if showOnEllipsis is true but the required CSS properties aren't detected.
  • For the vertical check (offsetHeight < scrollHeight), consider if this should be a separate option or if the check should only apply to width for text ellipsis use cases.

This is an automated review. A maintainer will provide final approval.

@vercel

vercel Bot commented Jan 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
primeng Error Error Jan 27, 2026 11:29am
primeng-5lp7 Ready Ready Preview, Comment Jan 27, 2026 11:29am

@github-actions

Copy link
Copy Markdown

Thanks a lot for your contribution! But, Unit tests failed. You can check the unit tests with the command 'pnpm run test:unit' and commit the changes.

@cetincakiroglu cetincakiroglu merged commit b277177 into master Jan 28, 2026
4 of 6 checks passed
@cetincakiroglu cetincakiroglu deleted the issue-12246 branch January 28, 2026 11:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component: Tooltip. Add ability to enable tooltip only if element has ellipsis (three dots in the end of text element)

2 participants