` does\ntoo. A function component that drops its ref will render, but the tooltip\nwill have nothing to position against.",
"import": "import { Tooltip } from 'ionbase-ui';",
"status": "stable",
"summary": "A text-only hint attached to a trigger. Opens on hover and on focus.",
"useWhen": [
"naming an icon-only control",
"adding a short clarification that is genuinely optional to read"
],
"useInstead": [
{
"when": "the hint needs a link, or has to work on touch",
"use": "Toggletip",
"why": "it opens on a press and stays open, and its link is the next Tab stop"
},
{
"when": "the content is a task — a field, a choice, several actions",
"use": "Popover",
"why": "a tooltip cannot be focused, cannot be scrolled, and closes the moment the pointer leaves"
},
{
"when": "the information is required to complete the field",
"use": "Input",
"why": "Input's helper text is always visible; a tooltip is not discoverable on touch"
},
{
"when": "the hint is the rest of a cut line of text",
"use": "TruncatedText",
"why": "it shows the tooltip only when the text is cut, makes the line a tab stop, and keeps the tooltip from being read twice"
}
],
"variants": {
"placement": {
"top": {
"use": "above the trigger — the default reading position"
},
"bottom": {
"use": "below the trigger, for something near the top of the viewport"
},
"left": {
"use": "to the left of the trigger"
},
"right": {
"use": "to the right of the trigger"
}
}
},
"slots": {
"label": {
"accepts": "text",
"note": "the hint. Text only"
},
"title": {
"accepts": "text",
"note": "optional heading above the label"
},
"children": {
"accepts": "Button",
"note": "the trigger. Must forward both a ref and DOM props"
}
},
"a11y": {
"role": "tooltip",
"guarantees": [
"focus opens it, not only hover — a hover-only tooltip is invisible to keyboard and switch users",
"Escape dismisses it",
"one tooltip open at a time with a shared warmup, so moving along a row of icon buttons does not flash one per button",
"`placement` flips to the opposite side when there is no room",
"it is the trigger's accessible description, unless `describesTrigger={false}` — for a label that repeats the trigger's own text, as TruncatedText's does"
],
"requires": [
"a trigger that is already labelled for icon-only controls — Tooltip supplies the hint, not the trigger's name"
]
},
"antiPatterns": [
{
"dont": "putting a link or button inside `label`",
"why": "it cannot be reached — the tooltip closes when the pointer leaves the trigger"
},
{
"dont": "a tooltip as the only place information appears",
"why": "it is undiscoverable on touch, where there is no hover"
},
{
"dont": "a tooltip on a disabled Button",
"why": "a disabled button takes no focus and often no pointer events, so the hint never appears for a keyboard user"
}
],
"stylesheet": "src/styles/tooltip.css",
"tokens": [
"--border-width-default",
"--font-family-sans",
"--font-weight-medium",
"--font-weight-regular",
"--ion-shadow-shadow-md",
"--ion-tooltip-arrow",
"--radius-sm",
"--spacing-12",
"--spacing-4",
"--spacing-8",
"--surface-inverse",
"--text-inverse",
"--type-body-sm",
"--type-body-sm-line-height"
],
"props": {
"label": {
"type": "React.ReactNode",
"required": true,
"origin": "own",
"description": "The hint. A tooltip is text only — anything interactive or focusable\nbelongs in a popover, because a tooltip cannot be focused, cannot be\nscrolled, and closes the moment the pointer leaves."
},
"title": {
"type": "React.ReactNode",
"required": false,
"origin": "own",
"description": "Optional heading above the label."
},
"placement": {
"type": "TooltipPlacement | undefined",
"required": false,
"origin": "own",
"description": "Matches the Figma `Placement` variant, and names where the TOOLTIP sits —\nnot where the arrow points. `top` is above the trigger, with the arrow on\nthe tooltip's bottom edge.\n\nTreated as a preference, not a guarantee: it flips to the opposite side\nwhen there is no room, which is the behaviour Figma cannot draw.",
"values": [
"top",
"bottom",
"left",
"right"
]
},
"delay": {
"type": "number | undefined",
"required": false,
"origin": "own",
"description": "Milliseconds before it opens on hover. Focus always opens immediately."
},
"isDisabled": {
"type": "boolean | undefined",
"required": false,
"origin": "own",
"description": "Disable the tooltip without unmounting the trigger."
},
"describesTrigger": {
"type": "boolean | undefined",
"required": false,
"origin": "own",
"description": "Whether the tooltip is the trigger's accessible description. Default\ntrue. Set false only when the label repeats text the trigger already\ncontains — the full text of a truncated line — so a screen reader, which\nreads the whole text anyway, does not hear it twice."
},
"children": {
"type": "React.ReactElement
>",
"required": true,
"origin": "own",
"description": "The element the tooltip describes. Must accept a ref and DOM props."
},
"className": {
"type": "string | undefined",
"required": false,
"origin": "own"
},
"ref": {
"type": "React.Ref | undefined",
"required": false,
"origin": "own",
"description": "Passed to the trigger with any other props, merged with the tooltip's\nown — so a Tooltip can itself be the child of a Popover or MenuTrigger,\nwhich clones its child with a ref and trigger props."
}
},
"propCounts": {
"own": 9,
"aria": 0,
"dom": 275,
"other": 0
}
}