Show full notification titles in tooltip on hover

[Copilot]

Summary

Fixes #14810

Notification titles are truncated with ellipsis when too long, but there was no way to view the full text.

Occurred changes and/or fixed issues

Added tooltip to notification titles that displays the full text on hover. Uses existing v-clean-tooltip directive already present in the component for other elements.

Technical notes summary

• Modified shell/components/nav/NotificationCenter/Notification.vue
• Added v-clean-tooltip="item.title" to the .item-title div
• Tooltip shows for all titles (truncated or not), consistent with Description.vue formatter pattern
• Existing CSS truncation remains unchanged (white-space: nowrap, overflow: hidden, text-overflow: ellipsis)

Areas or cases that should be tested

• Hover over notification titles with varying lengths
• Verify tooltip appears with full title text
• Test in both light and dark modes
• Browser used for local testing: Chrome (reviewer should test with different browser)

Areas which could experience regressions

• Notification Center interaction and navigation
• Tooltip display across different notification types (announcement, error, info, task, warning, success)

Screenshot/Video

Before: Truncated title with no way to view full text (see issue screenshot)
After: Tooltip displays full title on hover

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• download.cypress.io
  • Triggering command: /usr/local/bin/node /usr/local/bin/node index.js --exec install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Notification Center: Show full contents of truncated notification titles</issue_title>
<issue_description>Notification titles need a mechanism to display the full contents of truncated titles that are too long to display.

Acceptance criteria

• When hovering the title, show a tooltip displaying the full value of the title

Additional info

The current implementation properly truncates long titles, but doesn't provide a mechanism to display the full contents of the truncated title. For example:

</issue_description>

<agent_instructions>When adding the fixes comment to the PR, please ensure it references issues 14810</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@oboc-sts When hovering the title, show a tooltip displaying the full (not truncated) value of the title.

• Fixes Notification Center: Show full contents of truncated notification titles #14810

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.