feat(tooltip): introduce tooltip overlay directive

[dauriamarco]

Adds support for multiple components.

---

• I confirm that this MR follows the contribution guidelines.

[gemini-code-assist]

Summary of Changes

Hello @dauriamarco, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a major enhancement to the tooltip system, integrating it more deeply and consistently across various UI components. The changes focus on providing a more dynamic and accessible tooltip experience, complete with animations and intelligent display logic for truncated content. This broadens the utility of tooltips and refines their visual and interactive behavior throughout the application.

Highlights

• Expanded Tooltip Support: Tooltip functionality has been extended to several components, including ContentActionBarMainItem, SiCollapsiblePanel, SiTreeViewItemComponent, and SiTab components, allowing for more comprehensive UI feedback.
• Enhanced Tooltip Behavior: The SiTooltipDirective no longer uses a triggers input, simplifying its usage. Tooltips now feature tooltip-enter animations for a smoother appearance and tooltip-leave transitions for disappearance, improving the user experience.
• Accessibility Improvements: The title attribute has been replaced with aria-label in several instances (e.g., si-content-action-bar, si-tab) to improve accessibility for screen readers, ensuring better semantic meaning.
• Truncated Text Tooltips: The SiTreeViewItemComponent now includes an isLabelTruncated() method, enabling tooltips to automatically appear on tree view items when their labels are too long to be fully displayed.
• Updated Playwright Tests and Examples: Playwright end-to-end tests have been updated to reflect the new tooltip behaviors, including testing 'auto' placement and using focus() for triggering. The si-tooltip example has been significantly expanded to showcase tooltips across a wide range of components and scenarios.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces tooltip support to several components, including content-action-bar, collapsible-panel, and tree-view for truncated labels. The implementation is well-done, with nice additions like animations for the tooltip and accessibility improvements by replacing title attributes with aria-label. The refactoring of the siTooltip directive to have fixed triggers (focus and hover) with different delays simplifies its API and aligns with common UX patterns. The updated example page is now much more comprehensive.

I've found one minor issue in a test file regarding a brittle selector, which could be improved for better maintainability.

[github-actions]

Documentation.
Examples.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[github-actions]