feat: add title tooltip to truncated transaction cells#7415
feat: add title tooltip to truncated transaction cells#7415jonathanking wants to merge 6 commits intoactualbudget:masterfrom
Conversation
Add native browser `title` attributes so that hovering over truncated cells reveals their full content. This applies to all columns in the desktop transaction register (notes, payee, category, account) via the shared `UnexposedCellContent` component, and to the mobile transaction list notes via `TransactionListItem`. For columns where the formatter returns a display name string (payee, category, account), the tooltip shows the human-readable name. For columns where the formatter returns JSX (e.g. notes with colored tags), it falls back to the raw text value. Closes actualbudget#6735
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
👋 Hello contributor! We would love to review your PR! Before we can do that, please make sure:
We do this to reduce the TOIL the core contributor team has to go through for each PR and to allow for speedy reviews and merges. For more information, please see our Contributing Guide. |
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughA new release notes file documents an enhancement that adds hover tooltips to truncated transaction table cells. The Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
packages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsx
Outdated
Show resolved
Hide resolved
| const formatted = formatter ? formatter(value) : value; | ||
| return ( | ||
| <Text | ||
| title={typeof formatted === 'string' ? formatted : value} |
There was a problem hiding this comment.
This causes two popups to show when hovering a payee on a transaction with an imported payee. Can you find a way to suppress the title element on those types of payees?
There was a problem hiding this comment.
Thank you! I've tried to address this, but I wasn't able to confirm because I'm not sure how to observe that change in the deploy preview (I haven't yet fully set up a local dev env, my first time contributing!)
There was a problem hiding this comment.
No problem, thanks for doing this, and welcome to the project!
When a transaction is imported instead of manually added, an imported_payee is set in the background. This is shown by a dashed underline under a payee name, and shows in a popover when it's hovered.
Here's a budget file you can upload to the deploy preview that will let you replicate it.
I imagine the solution here is to set the title attribute only if imported_payee isn't found.
- Remove mobile title prop (no hover on touch devices) - Add optional title prop to UnexposedCellContent so callers can suppress the auto-generated title when they provide their own tooltip - Suppress title on payee cells with an imported payee to avoid duplicate tooltips
Instead of modifying the shared UnexposedCellContent (which affected
budget sidebar and all tables), add title attributes directly on the
specific transaction table cells that need them:
- Notes InputCell: title={notes}
- Payee CustomCell: title={displayPayee}
- Category CustomCell: title={categoryName}
This avoids unwanted tooltips on budget categories and other non-
transaction table views.
2 participants
Summary
Adds native browser
titleattributes to truncated cells in the transaction table, so hovering reveals the full content. This is a minimal change (4 lines added, 1 changed) that improves usability for long notes, payee names, and categories.titletoUnexposedCellContentintable.tsx. Uses the formatted display value when it's a string (payee/category/account names), falls back to the raw value when the formatter returns JSX (e.g. notes with#tagformatting).Closes #6735
Changes
packages/desktop-client/src/components/table.tsxtitletoUnexposedCellContent's<Text>elementpackages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsxtitle={notes}to notes<TextOneLine>Test plan
#tags: tooltip shows plain text, colored tags render normally in the cellBundle Stats
View detailed bundle stats
desktop-client
Total
Changeset
src/components/transactions/TransactionsTable.tsxView detailed bundle breakdown
Added
No assets were added
Removed
No assets were removed
Bigger
Smaller
No assets were smaller
Unchanged
loot-core
Total
View detailed bundle breakdown
Added
No assets were added
Removed
No assets were removed
Bigger
No assets were bigger
Smaller
No assets were smaller
Unchanged
api
Total
View detailed bundle breakdown
Added
No assets were added
Removed
No assets were removed
Bigger
No assets were bigger
Smaller
No assets were smaller
Unchanged
cli
Total
View detailed bundle breakdown
Added
No assets were added
Removed
No assets were removed
Bigger
No assets were bigger
Smaller
No assets were smaller
Unchanged