Tooltip Blurred and Transparent — GCash DS Assessment

RemoveNot Applicable

Tooltip Blurred and Transparent Component link

A dark, translucent directional tooltip with a backdrop blur, for use over photographic or high-contrast content.

Superseded by Tooltip

Superseded by Tooltip. The visual treatment that shipped as a standalone component is now Appearance=Translucent on the unified set. Note that the appearance is a palette only — no blur or alpha is attached to the fill — so the reduce-transparency fallback raised here no longer applies. Kept as a record of the assessment that drove the consolidation.

Used over photographic, gradient, or high-contrast imagery where an opaque white tooltip would feel heavy. The backdrop blur keeps the background legible while the dark surface carries white type with full contrast.

Header

Description goes here

Properties

header

description

pointer

scene

Reusable

Warn

Covers a real use case (tooltips over imagery), but the component is the wrong unit of reuse — the reusable thing is a translucent appearance on the canonical Tooltip. Today a consumer must pick between 3 sibling components to choose a skin. C1

Self-contained

Partial

Surface, label, and description colors bind to main/nudge/color/secondary/* tokens; spacing to space/*; radius to radius/radius-2. Blur amount (2.5 px) is a raw literal — no effect/blur-* token. Pointer is a raster. C6

Consistent

Warn

Component name is a visual-effect description ("Blurred and Transparent") rather than a role. Pointer direction is already correctly modelled as a single pointer enum here — which makes the 4-boolean shape on Tooltip V2 even harder to defend. C2

Composable

Fail

No slots for leading icon or body content. No dismiss control. No CTA support. If a consumer needs any of those, they must switch to a different Tooltip component — a clear signal this should be an appearance, not a component. C4

State	iOS	Android	Figma Property	Notes
Show / hide	Yes	Yes	Not annotated	Expected: fade + slight scale-in anchored on the pointer side. Under the unified schema, shared with other `appearance` values.
Backdrop blur	N/A	N/A	backdrop-blur 2.5 px	iOS: `.background(.ultraThinMaterial)` or a custom blurred `UIVisualEffectView`. Compose: `Modifier.blur()` or a Haze effect for true behind-content blur.
Tap outside	N/A	N/A	Not defined	Standard tooltip contract — tap-outside dismisses. Same as other Tooltip siblings.
Pressed / Focused	N/A	N/A	Not built	No interaction states modelled. No dismiss affordance at all — consumer must rely on tap-outside or a timer.
Reduce transparency	N/A	N/A	Not defined	iOS: respect `UIAccessibility.isReduceTransparencyEnabled` — fall back to an opaque `#0A2757` surface. Android: same fallback when high-contrast mode is on.

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
Tooltip Blurred and Transparent	Tooltip (same component)	EBTooltip
(distinct sibling)	appearance: .translucent	.ebAppearance(.translucent)
pointer: top / right / bottom / left	placement: .top / .right / .bottom / .left	arrowEdge: Edge
header (baked text)	title: String?	title: String?
description (baked text)	body: String?	body: String?
backdrop-blur 2.5 px (raw)	(absorbed into .translucent appearance)	.background(.ultraThinMaterial)
surface @ 80% opacity	main/nudge/color/translucent/bg	Color.nudgeTranslucentBg
(not modelled — no close)	hasDismiss: Bool (inherited)	dismissible: Bool

SwiftUI

ios/Components/Tooltip/EBTooltip.swift (shared — no separate file)

Jetpack Compose

android/components/tooltip/EBTooltip.kt (shared — no separate file)

// Translucent tooltip over imagery
EBTooltip(
    title: "Featured deal",
    body: "Limited-time discount on your next top-up.",
    placement: .top
)
.ebAppearance(.translucent)

// Under the hood, .translucent applies:
//   .background(.ultraThinMaterial)
//   .foregroundStyle(.white)
// + respects UIAccessibility.isReduceTransparencyEnabled

// Translucent tooltip over imagery
EBTooltip(
    title = "Featured deal",
    body = "Limited-time discount on your next top-up.",
    placement = EBTooltipPlacement.Top,
    appearance = EBTooltipAppearance.Translucent
)

// Under the hood, .Translucent applies:
//   Modifier.blur(radius = 2.5.dp) on the backing layer
//   background = nudgeTranslucentBg (#0A2757 @ 80%)
// + respects high-contrast settings (falls back to solid #0A2757)

Requirement	iOS	Android
Reduce transparency	Respect `UIAccessibility.isReduceTransparencyEnabled` — fall back to an opaque `#0A2757` surface with no blur.	Respect high-contrast text setting — fall back to an opaque `#0A2757` surface with no blur.
Contrast	White-on-`#0A2757` meets WCAG AA at both states. Over photographic backdrops, the 80% alpha + blur keeps contrast above 4.5:1 in the designer's tested scenes.	Same. Always test the `.translucent` appearance over real content; do not use it for critical error messaging.
Reduce motion	Respect `UIAccessibility.isReduceMotionEnabled` — fade only; skip scale-in.	Respect `Settings.Global.TRANSITION_ANIMATION_SCALE` — fade only when motion is reduced.
Role	Announce as tooltip; group title + body via `.accessibilityElement(children: .combine)`.	`semantics { role = Role.Popup; mergeDescendants = true }`.

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Requires Rework	Third sibling for one primitive. A visual treatment shipped as a discrete component. Consolidate into the canonical Tooltip.
C2	Variant & Property Naming	Requires Rework	Component name is a visual-effect description ("Blurred and Transparent"). Should collapse into `Tooltip / appearance=.translucent`.
C3	Token Coverage	Needs Refinement	Surface, label, description, radius, and spacing all bound to tokens. The blur amount (2.5 px) and the 80% group opacity are raw literals — move to a translucent-surface token set.
C4	Native Mappability	Requires Rework	Backdrop-blur is a platform material (`.ultraThinMaterial` / `Modifier.blur()`), not a component shape. A 1:1 Figma→native mapping today would emit a drawn blur layer instead of calling the correct API. Fixes when consolidated as an `appearance` value.
C5	Interaction State Coverage	Requires Rework	No Pressed / Focused / Dismissing states. No dismiss affordance at all (no close X).
C6	Asset & Icon Quality	Requires Rework	Pointer triangle is 4 raster images (one per edge). Same anti-pattern as `Tooltip V2`.
C7	Code Connect Linkability	Not Mapped	Blocked on consolidation — mapping today's shape would cement a duplicate component. Map once as one of the unified Tooltip's `appearance` values.

One enum axis yields 4 variants — pointer: top / right / bottom / left. Header + description are present in all shipped variants. Under the unified Tooltip, these 4 collapse into the shared placement enum, and the distinguishing surface treatment moves to appearance=.translucent.

#	Pointer	Dimensions	Node
1	top	336 × 89	49:335345
2	right	348 × 77	49:335347
3	bottom	336 × 89	49:335348
4	left	348 × 77	49:335346

Consolidated into Tooltip · node 6295:79647

Superseded by Tooltip — Tooltip Blurred and Transparent 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 49:335349

Verdict: Consolidate — Fold into the canonical Tooltip as appearance: .translucent. Do not ship a separate "Tooltip Blurred and Transparent" component. Open

Architecture

C1 — Third sibling for one primitive — Tooltip V2, Onboarding - Tooltip, Tooltip Blurred and Transparent. Merge via appearance enum. Open

C2 — Visual-effect name — "Blurred and Transparent" describes a treatment, not a role. Collapse to Tooltip / appearance=.translucent. Open

C4 — Backdrop-blur is a platform material — iOS uses .ultraThinMaterial; Compose uses Modifier.blur(). A component can't model a native modifier 1:1. Open

C5 — No interaction states, no dismiss — No Pressed / Focused / Dismissing; no close control at all. Open

C6 — Raster pointer + untokenized blur — 4 raster pointer images; blur radius (2.5 px) is a raw literal. Open

C7 — Code Connect — Blocked on consolidation. Mapping today's shape would cement a duplicate. Open

Pointer enum ✓ — Unlike Tooltip V2's 4-boolean pointer shape, this sibling already uses a single pointer enum — the correct model. Noted

Praise

Tokens ✓ — Surface / label / description bound to main/nudge/color/secondary/*. Spacing via space/*. Radius via radius/radius-2. Noted

Praise