feat(tooltip): Angular slTooltip directive - add support for setting type

[anna-lach]

This PR adds support for specifying the tooltip type (such as label or description) via the slTooltip directive input in the Angular package. The directive now accepts either a string or an object with text and optional type, improving accessibility and flexibility. The Angular documentation and stories have been updated to reflect the new API and usage patterns.

Angular Tooltip directive improvements:

• The slTooltip directive now supports an object input { text, type } in addition to a string, allowing tooltips to use different ARIA semantics (label or description).

Angular documentation and story updates:

• Updated the tooltip documentation and storybook stories to demonstrate the new input format, usage examples, and global styling guidance for tooltips created by the directive.
• Clarified usage of the for and type attributes for tooltips in overlay stories, aligning with the new directive capabilities.
• Updated the tooltip usage example in wrappers-overlay.stories.ts to use the for attribute instead of aria-describedby, aligning with the latest recommended approach.

[changeset-bot]

🦋 Changeset detected

Latest commit: d6468d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sl-design-system/angular	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🕸 Preview deploys

• Storybook: https://storybook-3608.d3c5h2uor7jlkj.amplifyapp.com
• Website: https://website-3608.d3c5h2uor7jlkj.amplifyapp.com

[a11ymiko]

Tooltip content is added as aria-labelledby to the button with text. This is not correct because text of button is not being announced by this.

Tooltip content should be added as aria-describedby. and then screen reader would announce both text from the button (as button's label) and tooltip's content (as button's description).

This issue is present in Angular > Components > Tooltip as well as Angular > Wrappers > Tooltip.

[a11ymiko]

Before tooltip disappears it changes position to display on top of button. This happens only in Safari.
This is similar bug to: #3598

Screen.Recording.2026-08-18.at.08.24.53.mov

[a11ymiko]

In Angular tooltip documentation first time slTooltip is mentioned it is styled as code with use. But in 'Directive' section it is styled as normal text:

[anna-lach]

Before tooltip disappears it changes position to display on top of button. This happens only in Safari. This is similar bug to: #3598

Screen.Recording.2026-08-18.at.08.24.53.mov

I think it would be the best to work on it in the #3598 issue.

[anna-lach]

Tooltip content is added as aria-labelledby to the button with text. This is not correct because text of button is not being announced by this.

Tooltip content should be added as aria-describedby. and then screen reader would announce both text from the button (as button's label) and tooltip's content (as button's description).

This issue is present in Angular > Components > Tooltip as well as Angular > Wrappers > Tooltip.

Good catch! It should be fine now.

[Copilot]

Pull request overview

Adds configurable tooltip semantics to Angular’s slTooltip directive and updates related examples and documentation.

Changes:

• Accepts { text, type } tooltip inputs.
• Adds styled directive examples and accessibility guidance.
• Updates generated MDX and overlay usage.

Reviewed changes

Copilot reviewed 6 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
.changeset/sour-eyes-check.md	Records the Angular feature.
scripts/extract-story-templates.js	Normalizes escaped backticks.
packages/angular/src/tooltip.directive.ts	Adds tooltip type support.
packages/angular/stories/tooltip.stories.ts	Expands directive examples.
packages/angular/stories/tooltip.intro.md	Documents usage and styling.
packages/angular/stories/wrappers-overlay.stories.ts	Uses the for association.
packages/angular/stories/generated/tooltip.mdx	Updates generated tooltip docs.
packages/angular/stories/generated/wrappers-overlay.mdx	Updates generated overlay docs.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.