KeepReady
Tooltip Component link

A pointered callout for walkthroughs and contextual hints. Carries a header, a description, and three slots — ⤷ AssetSlot, ⤷ CloseSlot, ⤷ ActionSlot.

Ship as-is
Consolidates three sibling components — Onboarding - Tooltip, Tooltip Blurred and Transparent and Tooltip V2 — into one 24-variant set. Every issue raised against those three is resolved: the pointer is a vector, the close is a DS icon instance, the four pointer booleans became a single Placement enum, and content sits in three named Figma slots. Interaction states are carried by the Button and close icon and are assessed on those components. Code Connect mappings are left open for engineering to register.
In Context

Contexts are illustrative. Tooltip sits above a dimmed cut-out during walkthroughs, and inline against a target element for contextual hints. The GBonds walkthrough screens in the Figma section show both.

Live Preview
HeaderDescription goes hereNext
Properties
Text
Placement
Appearance
Slots
⤷ AssetSlot
⤷ CloseSlot
⤷ ActionSlot
DS Health
Reusable
Pass
One component covers walkthrough coach-marks and inline hints across both surfaces. 24 variants span every text, placement and appearance combination with no gaps.
Self-contained
Pass
Carries its own surface, border, radius, padding and pointer. Height is a hug — Details takes the taller of the 46px asset slot and the text stack, so emptying a slot shrinks the card.
Consistent
Pass
One vocabulary end to end: the Text axis reads Header / Description / Both and the layers are #header / #description. All three slots use the ⤷ …Slot convention shared with the Table family.
Composable
Pass
Composes DS parts rather than redrawing them — the close is an icon instance and the CTA is a real Button - XSmall, both inside named slots a consumer can swap or empty.
Behavior
State iOS Android Figma Property Notes
Default Yes Yes Text × Placement × Appearance Tooltip is a presentation surface with no interaction states of its own. Tap and pressed behaviour belong to the Button - XSmall in ⤷ ActionSlot and the close icon in ⤷ CloseSlot.
Issues
  • Code Connect mappings not registered. Left open for engineering. The property surface is stable and linkable — three enums and three named slots, with layer names that match the property values. C7 · Code Connect Linkability
  • Three sibling Tooltips folded into one component. Onboarding - Tooltip, Tooltip Blurred and Transparent and Tooltip V2 are gone. The section now holds a single Tooltip set, and the visual treatment that shipped as its own component is now Appearance=Translucent. C2 · Variant & Property Naming
  • Pointer direction is a single enum. The four independent booleans on Tooltip V2, and the conflicting pointer schema on Onboarding - Tooltip, are replaced by Placement = Top | Bottom | Left | Right. Geometry follows: 24 × 12 on the vertical placements, 12 × 24 on the horizontal ones. C2 · Variant & Property Naming
  • Pointer is a vector, not a raster. All three predecessors shipped the triangle as a raster asset. It is now a real vector — a filled path plus a rounded stroke — that recolours per appearance and rotates per placement. C6 · Asset & Icon Quality
  • Close is a DS icon instance. Previously an image asset on two of the three siblings. It is now an icon instance sitting in ⤷ CloseSlot. C6 · Asset & Icon Quality
  • Content sits in named slots. The missing body and CTA support is resolved by three Figma slots — ⤷ AssetSlot (46 × 46), ⤷ CloseSlot (16 × 16) and ⤷ ActionSlot holding a real Button - XSmall. The leading gray placeholder circle is now the slot default rather than baked artwork. C1 · Layer Structure & Naming
  • One vocabulary across property, layer and content. The Text axis, the layer names and the slot names were reconciled in the same pass — Header / Description / Both, #header / #description, and the ⤷ …Slot convention shared with Table. C1 · Layer Structure & Naming
Recommendations
  • Document the dismiss contract and walkthrough lifecycle. Tooltip renders a close affordance but owns no dismiss behaviour. Write down who dismisses it, whether dismissal advances a walkthrough step, and what happens to the backdrop cut-out — otherwise each consumer invents it. No Figma change required. Docs
  • Fold Tooltip into the library-wide slot naming rule. Tooltip now follows the Table family convention (⤷ AssetSlot, ⤷ CloseSlot, ⤷ ActionSlot), making it two families to one against the carousel components’ unsuffixed form. Table already carries an open recommendation to write a single rule into the guidelines — this component should be named in it. Docs
Styles
Opaque — light surface
DES DEV

The default surface: white container, weak border, dark header and secondary description. Used over ordinary screen content.

Properties
Text Both
Placement Top
Appearance Opaque
Colors
Container bg #FFFFFF
Container border #E5EBF4
Header #0A2757
Description #6780A9
Close glyph #0A2757
Pointer #FFFFFF
Layout
Container width 336
Container height 122
Padding 16
Details → Action gap 16
⤷ AssetSlot 46 × 46
Asset → text gap 12
⤷ CloseSlot 16 × 16
⤷ ActionSlot 304 × 28
Corner radius radius/radius-2 (6px)
Pointer 24 × 12 top/bottom · 12 × 24 left/right
Typography
Header Primary/Header/Small
Font Proxima Soft Bold
Size / line 18 / 23
Tracking +0.25
Description Primary/Body/Fine
Font BarkAda SemiBold
Size / line 12 / 18
Tracking 0
Colors by Appearance Mode

Tooltip owns the container, pointer and text colours. The CTA button and close glyph are DS components documented on their own pages.

Role Token OpaqueTranslucent
Container bg bg/color-bg-main · bg/color-bg-inverse #FFFFFF #0A2757
Container border border/color-border-weak · bg/color-bg-inverse #E5EBF4 #0A2757
Header text/color-text-primary · text/color-text-inverse #0A2757 #FFFFFF
Description text/color-text-secondary · text/color-text-inverse-weak #6780A9 #F6F9FD @ 80%
Close glyph text/color-text-primary · text/color-text-inverse #0A2757 #FFFFFF
Pointer fill matches container bg #FFFFFF #0A2757
Pointer stroke matches container border #E5EBF4 #0A2757
Translucent — inverse surface
DES DEV

Inverse surface for placement over imagery and dimmed walkthrough backdrops. Naming only — no blur or alpha is attached to the fill.

Properties
Text Both
Placement Top
Appearance Translucent
Colors
Container bg #0A2757
Container border #0A2757
Header #FFFFFF
Description #F6F9FD @ 80%
Close glyph #FFFFFF
Pointer #0A2757
Layout
Container width 336
Container height 122
Padding 16
Details → Action gap 16
⤷ AssetSlot 46 × 46
Asset → text gap 12
⤷ CloseSlot 16 × 16
⤷ ActionSlot 304 × 28
Corner radius radius/radius-2 (6px)
Pointer 24 × 12 top/bottom · 12 × 24 left/right
Typography
Header Primary/Header/Small
Font Proxima Soft Bold
Size / line 18 / 23
Tracking +0.25
Description Primary/Body/Fine
Font BarkAda SemiBold
Size / line 12 / 18
Tracking 0
Layout

Measured from the component set. Height is a hug, not a fixed value.

Role Token Value
Container width — 336 (348 including a left/right pointer)
Padding space/space-16 16
Details → Action gap space/space-16 16
Asset → text gap space/space-12 12
Text → close gap space/space-16 16
Corner radius radius/radius-2 6
⤷ AssetSlot — 46 × 46
⤷ CloseSlot — 16 × 16
⤷ ActionSlot — 304 × 28
Pointer — 24 × 12 top/bottom · 12 × 24 left/right
Installation Planned API

Swift Package Manager

https://github.com/gcash/east-blue-ios

Gradle

implementation("com.gcash.eastblue:components:1.0.0")

Import — SwiftUI

import EastBlue

Import — Compose

import com.gcash.eastblue.components.EBTooltip

Native components are not yet implemented — all snippets show the planned API.

Property Mapping

Three enums and three slots. Placement drives the pointer edge only; anchoring and collision handling are the caller’s responsibility.

Figma PropertySwiftUICompose
Text = Header | Description | Both header: String? / description: String? header: String? / description: String?
Placement = Top | Bottom | Left | Right placement: .top / .bottom / .leading / .trailing placement: EBTooltipPlacement
Appearance = Opaque | Translucent appearance: .opaque / .translucent appearance: EBTooltipAppearance
⤷ AssetSlot .ebLeadingAsset { … } leadingAsset: @Composable (() -> Unit)?
⤷ CloseSlot onDismiss: (() -> Void)? onDismiss: (() -> Unit)?
⤷ ActionSlot .ebAction { … } action: @Composable (() -> Unit)?
SwiftUI
Sources/EastBlue/Components/EBTooltip.swift
Jetpack Compose
components/src/main/kotlin/com/gcash/eastblue/components/EBTooltip.kt
Usage Snippets Planned API
Walkthrough coach-mark — header, description, asset and CTA
EBTooltip(
    header: "Header",
    description: "Description goes here",
    placement: .top,
    appearance: .opaque,
    onDismiss: { step.skip() }
)
.ebLeadingAsset { Image("illustration") }
.ebAction { EBButton("Next").controlSize(.mini) }
EBTooltip(
    header = "Header",
    description = "Description goes here",
    placement = EBTooltipPlacement.Top,
    appearance = EBTooltipAppearance.Opaque,
    leadingAsset = { Image(painterResource(R.drawable.illustration), null) },
    action = { EBButton("Next", size = EBButtonSize.XSmall) },
    onDismiss = { step.skip() },
)
Inline hint — description only, no slots
EBTooltip(
    description: "Description goes here",
    placement: .bottom,
    appearance: .translucent
)
EBTooltip(
    description = "Description goes here",
    placement = EBTooltipPlacement.Bottom,
    appearance = EBTooltipAppearance.Translucent,
)
Accessibility
RequirementiOSAndroid
Announced as a single unit Group header + description with .accessibilityElement(children: .combine) Wrap content in Modifier.semantics(mergeDescendants = true)
Dismiss is reachable The close control needs a 44 × 44 hit target — the 16 × 16 glyph is the visual only Expand the touch target to 48 × 48 with Modifier.minimumInteractiveComponentSize()
Focus order during walkthroughs Move focus to the tooltip on present with .accessibilitySortPriority Request focus on the tooltip container when the step begins
Contrast Translucent pairs #FFFFFF on #0A2757 — passes AA at both text sizes Same — verify against the underlying backdrop when placed over imagery
Usage Guidelines

Do

Use Placement to point at the anchor element, and keep the tooltip within the safe area.

Don't

Do not rely on Placement for positioning — it sets the pointer edge only, not the tooltip’s location.

Do

Empty ⤷ AssetSlot and ⤷ ActionSlot for short inline hints — the container hugs down to the text.

Don't

Do not stack more than a header and one short description; Tooltip is not a modal.

Do

Use Translucent over imagery and dimmed walkthrough backdrops.

Don't

Do not expect Translucent to blur what is behind it — the name describes the palette, not an effect.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Semantic names throughout — Container, Details, Text Container, #header, #description, and three ⤷ …Slot slots.
C2 Variant & Property Naming Ready Three clean enums with consistent casing. Placement replaced four booleans; Appearance values both name visual treatments.
C3 Token Coverage Not Applicable Tooltip owns the container, pointer and text colours listed under Styles. The CTA button and close icon carry their own tokens and are audited on their own pages.
C4 Native Mappability Ready Maps to a popover or overlay with three enums and three composable slots. The container hugs its content, matching native layout behaviour.
C5 Interaction State Coverage Not Applicable A presentation surface with no states of its own. Pressed and disabled belong to the Button and close icon.
C6 Asset & Icon Quality Ready The pointer is a vector that recolours and rotates; the close is an icon instance. Both raster assets flagged on the predecessors are gone.
C7 Code Connect Linkability Not Mapped No CLI mappings registered yet — left open for engineering.
Variants Inventory (24 total)

3 Text × 4 Placement × 2 Appearance = 24 variants, a complete matrix with no gaps. Top and Bottom measure 336 × 134; Left and Right measure 348 × 122, the extra 12 being the pointer.

PlacementTextAppearanceContainerCount
TopHeader · Description · BothOpaque · Translucent336 × 1346
BottomHeader · Description · BothOpaque · Translucent336 × 1346
LeftHeader · Description · BothOpaque · Translucent348 × 1226
RightHeader · Description · BothOpaque · Translucent348 × 1226
View full Text × Placement × Appearance breakdown (24 rows)
TextPlacementAppearanceNode
HeaderTopOpaque6295:79648
DescriptionTopOpaque6295:79663
BothTopOpaque6295:79678
HeaderTopTranslucent6295:79694
DescriptionTopTranslucent6295:79709
BothTopTranslucent6295:79724
HeaderBottomOpaque6295:79740
DescriptionBottomOpaque6295:79755
BothBottomOpaque6295:79770
HeaderBottomTranslucent6295:79786
DescriptionBottomTranslucent6295:79801
BothBottomTranslucent6295:79816
HeaderLeftOpaque6295:79832
DescriptionLeftOpaque6295:79847
BothLeftOpaque6295:79862
HeaderLeftTranslucent6295:79878
DescriptionLeftTranslucent6295:79893
BothLeftTranslucent6295:79908
HeaderRightOpaque6295:79924
DescriptionRightOpaque6295:79939
BothRightOpaque6295:79954
HeaderRightTranslucent6295:79970
DescriptionRightTranslucent6295:79985
BothRightTranslucent6295:80000
1.0.0 — August 2026Initial
Consolidated assessment · node 6295:79647
Three components became one — Onboarding - Tooltip, Tooltip Blurred and Transparent and Tooltip V2 are superseded by this 24-variant set. Their pages are retained as remove stubs pointing here. Documented
Initial
Pointer booleans became an enum — four independent booleans replaced by Placement = Top | Bottom | Left | Right. Resolved
C2
Raster assets replaced — the pointer is a vector path that recolours per appearance and rotates per placement; the close is a DS icon instance. Resolved
C6
Content moved into named slots — ⤷ AssetSlot, ⤷ CloseSlot and ⤷ ActionSlot, the last holding a real Button - XSmall. Resolved
C1
Naming reconciled post-consolidation — Text values recased to Header / Description / Both, the wrapper frame unified to Text Container, layers renamed to #header / #description, Appearance changed from Onboarding to Opaque, and the slots adopted the ⤷ …Slot convention. Resolved
C2
Interaction states delegated — Tooltip is a presentation surface; pressed and disabled are carried by the Button and close icon and assessed there. Reassigned
C5
Code Connect mappings not registered — left open for engineering. Open
C7