East Blue
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
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
  • 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
HeaderDescription goes hereNext
Properties
Text
Placement
Properties
Appearance Opaque
Text Both
Placement Top
Colors
Container #FFFFFF
Border #E5EBF4
Pointer #FFFFFF
Header #0A2757
Description #6780A9
Close #0A2757
Asset placeholder #D7E0EF
Action button #005CE5
Action label #FFFFFF
Typography
#header Primary/Headlines/Block
#description Secondary/Bold/Caption
Layout
Height 134
Width 336
Radius 6
Padding H —
Padding V —
Gap —
Border 1
Alignment —
Colors by Appearance
Role Element Token Value
Opaque Container — #FFFFFF
Opaque Border — #E5EBF4
Opaque Pointer — #FFFFFF
Opaque Header — #0A2757
Opaque Description — #6780A9
Opaque Close — #0A2757
Opaque Asset placeholder — #D7E0EF
Opaque Action button — #005CE5
Opaque Action label — #FFFFFF
Translucent Container — #0A2757
Translucent Border — #0A2757
Translucent Pointer — #0A2757
Translucent Header — #FFFFFF
Translucent Description — #F6F9FD @ 80%
Translucent Close — #FFFFFF
Translucent Asset placeholder — #D7E0EF
Translucent Action button — #005CE5
Translucent Action label — #FFFFFF
Translucent
HeaderDescription goes hereNext
Properties
Text
Placement
Properties
Appearance Translucent
Text Both
Placement Top
Colors
Container #0A2757
Border #0A2757
Pointer #0A2757
Header #FFFFFF
Description #F6F9FD @ 80%
Close #FFFFFF
Asset placeholder #D7E0EF
Action button #005CE5
Action label #FFFFFF
Typography
#header Primary/Headlines/Block
#description Secondary/Bold/Caption
Layout
Height 134
Width 336
Radius 6
Padding H —
Padding V —
Gap —
Border 1
Alignment —
Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:tooltip:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.tooltip.*

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

Property Mapping

Text, Placement and Appearance are the set’s three variant properties. ⤷ AssetSlot, ⤷ CloseSlot and ⤷ ActionSlot are Figma Slots; #header and #description are text layers read from 6295:79678 — their exposure as text properties is not readable with the plugin.

Figma PropertySwiftUICompose
Text — Header, Description, Both header: and description: — pass one or both header = and description = — pass one or both
Placement — Top, Bottom, Left, Right placement: .top / .bottom / .left / .right placement = EBTooltipPlacement.Top / Bottom / Left / Right
Appearance — Opaque, Translucent appearance: .opaque / .translucent appearance = EBTooltipAppearance.Opaque / Translucent
⤷ AssetSlot (slot) .ebLeadingAsset(Image) leadingAsset = { Icon(…) }
⤷ CloseSlot (slot) .onDismiss { } onDismiss = { }
⤷ ActionSlot (slot) .ebAction("Next") { } action = EBButton("Next", size = EBButtonSize.XSmall) { }
#header (text) header: String? header = "…"
#description (text) description: String? description = "…"
Usage Snippets Planned API
Opaque
EBTooltip(
    header: "Header",
    description: "Description goes here",
    placement: .top,
    appearance: .opaque
)
    .ebLeadingAsset(Image("illustration"))
    .ebAction("Next") { }
    .onDismiss { }
EBTooltip(
    header = "Header",
    description = "Description goes here",
    placement = EBTooltipPlacement.Top,
    appearance = EBTooltipAppearance.Opaque,
    leadingAsset = { Icon(…) },
    action = EBButton("Next", size = EBButtonSize.XSmall) { },
    onDismiss = { }
)
Translucent
EBTooltip(
    header: "Header",
    description: "Description goes here",
    placement: .top,
    appearance: .translucent
)
    .ebLeadingAsset(Image("illustration"))
    .ebAction("Next") { }
    .onDismiss { }
EBTooltip(
    header = "Header",
    description = "Description goes here",
    placement = EBTooltipPlacement.Top,
    appearance = EBTooltipAppearance.Translucent,
    leadingAsset = { Icon(…) },
    action = EBButton("Next", size = EBButtonSize.XSmall) { },
    onDismiss = { }
)
Accessibility
RequirementiOSAndroid
Announced as one unit .accessibilityElement(children: .combine) on the container — header then description. Modifier.semantics(mergeDescendants = true) on the container.
Dismiss is reachable Close is a Button with accessibilityLabel("Dismiss"); the 16 pt glyph gets a 44 pt hit area; .accessibilityAction(.escape) also dismisses. IconButton with contentDescription = "Dismiss" and a 48 dp touch target; back press dismisses.
Focus order Header, description, then Next, then Dismiss — a walkthrough moves focus to the next tooltip after Next. Same order; request focus on the new tooltip after Next.
Contrast Opaque: #0A2757 on white (13.9:1); Translucent: white on #0A2757 (13.9:1), description at 80% still 9.4:1. Same values — the surfaces are fixed, not themed.
Usage Guidelines

Do

Point Placement at the anchor and keep the 336 px container inside the safe area.

Don't

Don’t let the pointer sit over the anchor’s edge — move the tooltip, not the pointer.

Do

Use Translucent over imagery and dimmed walkthrough backdrops.

Don't

Don’t use Translucent on a plain white screen; Opaque is the default there.

Do

Use Text Both for walkthrough steps, Header alone for a one-line hint.

Don't

Don’t exceed one line in the header; the description is the place for detail.

Do

Fill ⤷ ActionSlot with the Next step of a walkthrough.

Don't

Don’t put a destructive action in the slot.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Needs Refinement Container › Details › ⤷ AssetSlot / Text Container / ⤷ CloseSlot, ⤷ ActionSlot, pointer-adjustment — read on 6295:79678. The slots keep the ⤷ glyph and the text layers the # sigil that the rest of the system has dropped.
C2 Variant & Property Naming Ready Text, Placement, Appearance with Title Case values.
C3 Token Coverage Ready #header → Primary/Headlines/Block, #description → Secondary/Bold/Caption. Colour variable bindings are not readable with the plugin — confirm in Dev Mode.
C4 Native Mappability Ready Three enums, three slots, two strings — maps 1:1 onto EBTooltip.
C5 Interaction State Coverage Not Applicable Interaction lives on the Button - XSmall and the Close icon and is assessed there.
C6 Asset & Icon Quality Needs Refinement The pointer is a vector and the asset a swappable instance; the Close icon carries a shape_full BOOLEAN_OPERATION — flatten it in the icon library.
Variants Inventory (24 total)

3 Text × 4 Placement × 2 Appearance = 24 variants, a complete matrix

AppearanceText × PlacementCount
OpaqueHeader, Description, Both × Top, Bottom, Left, Right12
TranslucentHeader, Description, Both × Top, Bottom, Left, Right12
View full Text × Placement × Appearance breakdown (24 rows)
TextPlacementAppearanceNodeDimensions
HeaderTopOpaque6295:79648336 × 134
HeaderTopTranslucent6295:79694336 × 134
DescriptionTopOpaque6295:79663336 × 134
DescriptionTopTranslucent6295:79709336 × 134
BothTopOpaque6295:79678336 × 134
BothTopTranslucent6295:79724336 × 134
HeaderBottomOpaque6295:79740336 × 134
HeaderBottomTranslucent6295:79786336 × 134
DescriptionBottomOpaque6295:79755336 × 134
DescriptionBottomTranslucent6295:79801336 × 134
BothBottomOpaque6295:79770336 × 134
BothBottomTranslucent6295:79816336 × 134
HeaderLeftOpaque6295:79832348 × 122
HeaderLeftTranslucent6295:79878348 × 122
DescriptionLeftOpaque6295:79847348 × 122
DescriptionLeftTranslucent6295:79893348 × 122
BothLeftOpaque6295:79862348 × 122
BothLeftTranslucent6295:79908348 × 122
HeaderRightOpaque6295:79924348 × 122
HeaderRightTranslucent6295:79970348 × 122
DescriptionRightOpaque6295:79939348 × 122
DescriptionRightTranslucent6295:79985348 × 122
BothRightOpaque6295:79954348 × 122
BothRightTranslucent6295:80000348 × 122
1.0.1 — September 2026Patch
Style and Code tabs re-read · node 6295:79647
Style tab rebuilt from the 24 live variants. Cards follow Appearance — Opaque, Translucent — with Text and Placement as panel controls and the three slots drawn filled as Figma ships them; the asset placeholder is now the solid #D7E0EF instance and the Close the library glyph. Padding, gap, alignment and colour tokens are not readable with the plugin and stay —.
Docs
Code tab regrouped on the three-property schema. Property Mapping one row per property with the three slots, Usage Snippets per Appearance, Guidelines trimmed to four, Scorecard regraded, Variants Inventory on the 24 live nodes with a summary and collapsed breakdown.
Docs
Layer names keep the retired glyph and sigil. ⤷ AssetSlot, ⤷ CloseSlot, ⤷ ActionSlot, #header and #description on 6295:79678 predate the family convention (-Slot suffix, no sigil). Filed from the scorecard for the Component Review.
C1
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