UI — Add info tooltips to explanation cards for non-technical users

[Tinna23]

Description

Terms like "signer", "trust line", "fee", "memo", and "skipped operation" are not self-explanatory to non-technical users. A small ⓘ icon in the corner of each relevant card — showing a plain-English tooltip on hover (desktop) or tap (mobile) — gives users context without cluttering the UI.

What to Build

src/components/common/InfoTooltip.tsx

interface Props {
  text: string;        // tooltip content
  position?: 'top' | 'bottom' | 'left' | 'right';  // default: 'bottom'
}

Behaviour:

• Renders a small ⓘ icon (SVG, not emoji — consistent sizing)
• Desktop hover: shows floating tooltip
• Mobile tap: toggles tooltip open/closed, dismisses on outside tap
• Tooltip dismisses on Escape key
• Accessible: role="tooltip", aria-describedby wired correctly
• CSS only where possible — avoid heavyweight tooltip libraries
• Use position: fixed to avoid clipping by overflow containers

Tooltips to add (copy provided — do not change the text)

Component	Location	Tooltip text
TransactionResult — Payments section	Next to "PAYMENTS" label	"A payment transfers an asset (XLM, USDC, etc.) from one Stellar account to another."
TransactionResult — Fee card	Next to "FEE" label	"The fee is a small amount of XLM paid to the Stellar network to process this transaction. It prevents spam and pays validators."
TransactionResult — Memo card	Next to "MEMO" label	"A memo is an optional note attached to a transaction — commonly used for payment references, order IDs, or customer identifiers."
TransactionResult — Skipped operations	Next to skipped count	"This transaction contains operation types that Stellar Explain does not yet fully support. Support for more operation types is coming soon."
AccountResult — Signers	Next to "SIGNERS" label	"Signers are accounts or keys authorised to submit transactions on behalf of this account. Multiple signers indicate a multisig setup requiring more than one key to approve transactions."
AccountResult — Other Assets	Next to "OTHER ASSETS" label	"Trust lines are opt-in agreements that allow an account to hold non-native assets like USDC or custom tokens. Each asset requires its own trust line."
AccountResult — Flags	Next to "ACCOUNT FLAGS" label	"Flags control special behaviours on this account set by the account owner or asset issuer — such as whether it requires authorisation to hold certain assets."

Key Files

• src/components/common/InfoTooltip.tsx (create)
• src/components/TransactionResult.tsx (add tooltips)
• src/components/AccountResult.tsx (add tooltips)

Acceptance Criteria

• ⓘ icon visible on all 7 specified locations
• Tooltip appears on hover (desktop) — does not shift page layout
• Tooltip toggles on tap (mobile) and dismisses on outside tap
• Escape key closes tooltip
• role="tooltip" and aria-describedby present and correct
• Tooltip copy matches the text specified in this issue exactly
• No layout shift when tooltip opens
• Works correctly inside overflow-hidden containers

Complexity: Medium · 150 pts
Stage: S8 — Account Depth