Tooltip - Onboarding — GCash DS Assessment

RemoveNot Applicable

Named Onboarding - Tooltip in Figma. A directional tooltip used in onboarding overlays, with a pointer, header, description, and dismiss control. Superseded by Tooltip.

Superseded by Tooltip

Superseded by Tooltip. This component was folded into the unified 24-variant set at node 6295:79647, which resolves every issue raised here — the pointer is a vector, the close is a DS icon instance, the pointer schema became a single Placement enum, and content moved into named Figma slots. Kept as a record of the assessment that drove the consolidation.

A dismissible tip anchored to a feature element — commonly rendered during first-time user education, feature discovery, and coach-mark flows.

Header

Description goes here

Placement

pointer

Reusable

Warn

Works as a dismissible tip anchored to any target. But the "Onboarding -" prefix steers consumers toward walkthroughs it can't support (no step indicator, no Next/Skip). Misleading name fragments the primitive. C1

Self-contained

Warn

Surface, type, and spacing bind to main/nudge/* + space/* tokens — shares the collection with Tooltip V2. But the pointer arrow is 4 raster copies of one shape, and the close is an image asset rather than a DS icon instance. C6

Consistent

Warn

Pointer is modeled as a single enum here, but Tooltip V2 models the same concept as 4 booleans. Siblings should not disagree on the shape of a shared axis. C2

Composable

Fail

No Figma Slot for body content. No way to add an icon, an avatar, or a CTA — consumers who need those must switch components entirely. The primitive is closed. C4

State	iOS	Android	Figma Property	Notes
Show / hide	Yes	Yes	Not annotated	Expected: fade + slight scale-in anchored on the pointer side.
Tap close (X)	Yes	Yes	Close layer	Dismiss icon is present but not wired to an interactive property. Close is an image asset, not a button instance.
Tap outside	N/A	N/A	Not defined	Standard tooltip contract — tap-outside dismisses. Should be documented on the component.
Primary CTA	N/A	N/A	Not built	Despite the "Onboarding" name, no CTA is provided. Consumers must switch to Tooltip V2 for any advance/skip control.
Pressed / Focused on close	N/A	N/A	Not built	Close is a raw image; no pressed / focused treatment and no hit target metadata.

iOS — Swift Package Manager

// In Xcode: File → Add Package Dependencies
"https://github.com/AY-Org/eb-ds-ios"

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:tooltip:1.0.0")
}

Figma Property	SwiftUI	Compose
Onboarding - Tooltip (this)	Tooltip · appearance: .default	EBTooltip().ebAppearance(.default)
pointer: top / right / bottom / left	placement: .top / .right / .bottom / .left	arrowEdge: Edge
header (baked text)	title: String?	title: String?
description (baked text)	body: String? (or content slot)	body: String?
close (image asset, always shown)	hasDismiss: Bool	dismissible: Bool
(not modeled)	cta: .none / .primary / .pair	primary / secondary: TooltipAction?
(not modeled)	leading (Slot)	@ViewBuilder leading
(not modeled)	onDismiss	onDismiss: () -> Void

SwiftUI

ios/Components/Tooltip/EBTooltip.swift

Jetpack Compose

android/components/tooltip/EBTooltip.kt

// Equivalent of today's "Onboarding - Tooltip · pointer=bottom"
EBTooltip(
    title: "Quick transfers",
    body: "Tap here to send money to recent contacts.",
    placement: .bottom
)
.onDismiss { showTip = false }

// pointer=right · same appearance, placement flipped
EBTooltip(
    title: "Your balance",
    body: "Tap to reveal or hide.",
    placement: .right
)

// Equivalent of today's "Onboarding - Tooltip · pointer=bottom"
EBTooltip(
    title = "Quick transfers",
    body = "Tap here to send money to recent contacts.",
    placement = EBTooltipPlacement.Bottom,
    onDismiss = { showTip = false }
)

// pointer=right
EBTooltip(
    title = "Your balance",
    body = "Tap to reveal or hide.",
    placement = EBTooltipPlacement.Right
)

Requirement	iOS	Android
Role + focus	Announce as `.accessibilityAddTraits(.isModal)` when dismissible; VoiceOver moves focus to the tooltip on appear.	`semantics { role = Role.Popup }`; TalkBack focuses the tooltip container on appear.
Close control	Wrap close as a `Button` with `accessibilityLabel` "Dismiss tip" and 44×44 hit target (current 24 × 24 is below minimum).	`IconButton` with `contentDescription = "Dismiss tip"`; 48×48 dp minimum (current hit area is ~24 × 24 dp).
Dismiss-outside	Do not auto-dismiss while VoiceOver is active — hold until user explicitly moves on.	Do not auto-dismiss while TalkBack is active.
Reduce motion	Respect `UIAccessibility.isReduceMotionEnabled` — fade only, skip scale-in.	Respect `Settings.Global.TRANSITION_ANIMATION_SCALE` — fade only when motion reduced.
Combined label	Read title + body + "Dismiss" as one phrase; avoid reading pointer.	`mergeDescendants = true` on the container.

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Requires Rework	"Onboarding -" prefix misleads — component ships no walkthrough content. 3 sibling Tooltip components for one primitive. Close uses a raw image inside a generic "Close" frame.
C2	Variant & Property Naming	Needs Refinement	Pointer is correctly modeled as one enum here (cleaner than Tooltip V2's 4 booleans) — but siblings should agree on the shape of the shared axis.
C3	Token Coverage	Ready	Surface, border, label, description, close icon, shadow all bound to `main/nudge/` / `elevation/`. Spacing via `space/*`. Radius via `radius/radius-2`.
C4	Native Mappability	Requires Rework	Closed shape — no slot for body content or CTA. Maps cleanly to native only after consolidation into the unified Tooltip with content slot + cta axis.
C5	Interaction State Coverage	Requires Rework	No Pressed / Focused on close. No appearing / dismissing lifecycle annotated. Close isn't wired to a dismiss property.
C6	Asset & Icon Quality	Requires Rework	Pointer is 4 raster images (one per direction). Close is an image asset (`imgShapeFull`) rather than an `icon/close` instance.
C7	Code Connect Linkability	Not Mapped	Blocked on consolidation. Mapping today's sibling component would cement the wrong schema.

One axis: pointer (4 values) = 4 variants. Content (header / description / close) is fixed across all variants.

#	Pointer	Dimensions	Pointer asset	Node
1	top	336 × 90	imgPointer	51:17065
2	bottom	336 × 89	imgPointer1	51:17063
3	left	348 × 78	imgPointer2	51:17062
4	right	348 × 78	imgPointer3	51:17064

Consolidated into Tooltip · node 6295:79647

Superseded by Tooltip — Onboarding - Tooltip was consolidated into the unified Tooltip set (node 6295:79647) alongside its two siblings. Verdict changed to Remove; open issues and recommendations cleared, since they are resolved on the successor. Resolved

Consolidated

Initial Assessment · node 51:17066

Verdict: Consolidate — Fold into the unified Tooltip as appearance: .default with the placement axis. The "Onboarding -" prefix is misleading (no walkthrough content ships). Open

Architecture

C1 — Misleading name — No step indicator, no Next/Skip/Back CTAs, no progress dots. Component is not onboarding-specific. Open

C1 — 3 siblings for 1 primitive — Tooltip V2, Onboarding - Tooltip, Tooltip Blurred and Transparent. Merge via appearance + placement. Open

C2 — Pointer schema disagrees with sibling — This sibling uses one enum; Tooltip V2 uses 4 booleans. Family members should agree on the shape of a shared axis. Open

C4 — No slot for body or CTA — Closed shape forces consumers to switch to Tooltip V2 for anything richer than header + description. Open

C5 — No dismiss/focus states — Close is a raw image; Pressed / Focused / Lifecycle not modeled. Open

C6 — Raster pointer + raw close — 4 raster images (one per direction). Close is an image asset rather than icon/close. Vector + icon instance. Open

C7 — Code Connect — Blocked on consolidation. Open

Tokens ✓ — Surface / border / label / description / close / shadow all bound to main/nudge/* and elevation/*. Spacing via space/*. Noted

Praise